我正在使用以下jquery代码进行自动完成下拉列表。但是keywboard arrow navigarion不起作用。这是代码:
$(document).ready(function () {
$(document).click(function () {
$("#ajax_resp").fadeOut('slow');
});
$("#location").focus();
var offset = $("#location").offset();
var width = $("#location").width() - 2;
$("#ajax_resp").css("left", offset.left);
$("#ajax_resp").css("width", width);
$("#location").keyup(function (event) {
var location = $("#location").val();
if (location.length) {
if (event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13) {
$("#loading").css("visibility", "visible");
$.ajax({
type: "POST",
url: "file.php?city=" + location,
data: "data=" + location,
success: function (msg) {
if (msg != 0) $("#ajax_resp").fadeIn("slow").html(msg);
else {
$("#ajax_resp").fadeIn("slow");
$("#ajax_resp").html('<div style="text-align:left;">No Matches Found</div>');
}
$("#loading").css("visibility", "hidden");
}
});
} else {
switch (event.keyCode) {
case 40:
{
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");
} else $("li:last").addClass("selected");
}
break;
case 13:
$("#ajax_resp").fadeOut("slow");
$("#location").val($("li[class='selected'] a").text());
break;
}
}
} else $("#ajax_resp").fadeOut("slow");
});
$("#ajax_resp").mouseover(function () {
$(this).find("li a:first-child").mouseover(function () {
$(this).addClass("selected");
});
$(this).find("li a:first-child").mouseout(function () {
$(this).removeClass("selected");
});
$(this).find("li a:first-child").click(function () {
$("#location").val($(this).text());
$("#ajax_resp").fadeOut("slow");
});
});
});
我想启用键盘箭头导航。请帮忙