Ajax jquery键盘导航无法处理自动完成下拉列表

时间:2014-04-07 07:22:15

标签: jquery

我正在使用以下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");

            });

        });

});

我想启用键盘箭头导航。请帮忙

0 个答案:

没有答案