Autosuggest down key not working
I've built an autosuggest div for an app, that loads from Ajax. The values and everything fill in just fine, but I want to handle moving from the input field to the suggestions DIV, using the down arrow. I cannot seem to get the right syntax or something!
Any tips appreciated!
My JQuery stuff:
-
function jQajax(ipfield,ajd,dbtable,company,select,element){
if (!ipfield || !ajd || !dbtable || !company || !select || !element){alert("Parameters not sent to ajax handler correctly; Input to act on, Ajax Div, Database table to check, Company (database name), Field to select, Element Id. "); return false;}
actobj="#"+ipfield;// set the active object for jQuery
ajdiv="#"+ajd; //set the ajax responding div
var ajxsel = null;
leftpos = findPos($(actobj));
var width = $(actobj).width()-2;
$(ajdiv).css("left",leftpos);
$(ajdiv).css("width",width);
$(actobj).keyup(function(event){
$(ajdiv).delay(10000, function(){$(ajdiv).fadeOut()});
//alert(event.keyCode);
//Key presses you need to know: 40=down 38=up 13=Enter 27=ESC 8=Bkspc 46=DEL
var keyword = $(actobj).val();
if(keyword.length)
{
if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13)
{
$.ajax({
type: "GET",
url: "includes/ajax_server.php",
cache: false,
data: "company="+company+"&data="+keyword+"&table="+dbtable+"&select="+select,
success: function(msg){
if(msg != 0)
$(ajdiv).fadeIn("slow").html(msg);
else
$(ajdiv).fadeOut("slow");
}
});
}
else
{
switch (event.keyCode)
{
case 40:
//alert("you pressed down");
{
found = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
found = 1;
});
if(found == 1)
{
var sel = $("li[class='selected']");
sel.next().addClass("selected");
sel.removeClass("selected");
}
else
$("li:first").addClass("selected");
}
break;
case 38:
{
found = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
found = 1;
});
if(found == 1)
{
var sel = $("li[class='selected']");
sel.prev().addClass("selected");
sel.removeClass("selected");
ajxsel=1;
}
else
$("li:last").addClass("selected");
ajxsel=1;
}
break;
case 13:
if(ajxsel==1){ $(actobj).val($("li[class='selected'] a").text());}
loadSkuDetails(element);
$(ajdiv).fadeOut("slow");
break;
case 27:
$(ajdiv).fadeOut("slow");
$(actobj).focus();
}
}
}
else
$(ajdiv).fadeOut("slow");
});
$(ajdiv).mouseover(function(){
$(this).find("li a:first-child").mouseover(function () {
$(this).addClass("selected");
ajxsel=1;
});
$(this).find("li a:first-child").mouseout(function () {
$(this).removeClass("selected");
});
$(this).find("li a:first-child").click(function () {
$(actobj).val($(this).text());
loadSkuDetails(element);
$(ajdiv).fadeOut("slow");
});
});
};
function findPos(obj) { //find the REAL position of the parent object, especially useful when scrolling can occur
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
} while (obj = obj.offsetParent);
return [curleft];
}
}
jQuery.fn.delay = function(time,func){ //run a delayed function
return this.each(function(){
setTimeout(func,time);
});
};