...

View Full Version : Autocomplete arrow up arrow down



mathceleb
02-17-2011, 05:56 PM
I am requesting assistance in the final step of an autocomplete script. I'm still new to jQuery. I picked this script up online and made a few updates to it. After reviewing in Firebug, I have the errors removed, but the script is not allowing me to arrow up or arrow down in the drop down list.

Try typing the word "division". Then arrow down. I would like the arrow down/arrow up to load the value of the selection into #sbox.

http://www.mathcelebrity.com/topmenu2.php


<input type="text" name="searchInput" id="sbox" maxlength="150" size="18" value="" onkeyup="lookup(this.value)">&nbsp;<input TYPE="submit" id="sbox" VALUE="GO!" name="pl" onblur="fill();">
<div class="suggestionsBox" id="suggestions" style="display: none;">

<div class="suggestionList" id="autoSuggestionsList">

</div>

</div>



<script type="text/javascript">
function lookup(inputString){

if (inputString.length == 0){
$('#suggestions').hide();
}
else{

$.post("calcsave.php", {xterm: ""+inputString+""}, function(data){

if(data.length>0){
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
} // end data.length

});

}

} // end lookup function

function fill(thisValue) {
$('#sbox').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
} // end fill function


$('#sbox').keypress(function(e) {
if (window.currentIndex===undefined) {currentIndex = 0;}
input = $('#sbox');
input.suggestionsList = $('ul#suggestions');
input.active = 'active_li';
input.items = document.getElementById('autoSuggestionsList').getElementsByTagName('li');

switch(getEventCode(e)) {
case 13 : //prevent form submission through the enter button
$('#sbox').val($(input.items[currentIndex-1]).html());
return false;
break;
case 38 :
go("up");
break;
case 40 :
go("down");
break;
case 27 :
break;
default :
//go("nowhere")
break;
}
});

go = function(where) {
last = currentIndex;
currentIndex += (where == "down") ? 1 : -1;
if (currentIndex < 1) currentIndex = input.items.length;
if (currentIndex > input.items.length) currentIndex = 1;
selectItem(currentIndex, last);
}

selectItem = function(index, lastIndex) {
for ( i =1; i <= input.items.length; i++ ) {
if (i == index) {
thisElem = input.items[i-1];
$(thisElem).addClass(input.active);
}

if (i == lastIndex) {
thisElem = input.items[i-1];
$(thisElem).removeClass(input.active);
}
}
}

submitForm = function() {
value = input.items[currentIndex-1].html();
$('input#sbox').val(value);

}

reset = function() {
currentIndex = 0;
}

getEventCode = function(evt) {
code = null;
if (!evt) evt = window.event;
code = evt.keyCode;
return code;
}


</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum