在jquery中添加箭头键导航_Jquery

在jquery中添加箭头键导航

jquery

在jquery中添加箭头键导航,jquery,Jquery,我正在jquery中开发一个自动完成插件。结果将根据输入字段中的输入作为无序列表填充到div中。ajax调用是在keyUp事件中进行的。一切正常。现在我必须将导航添加到已填充的列表中。我在keyDown事件上执行此操作，导航工作正常，但在keyDown之后，会生成keyUp事件，并再次进行ajax调用是否有一种方法可以添加导航，以便在向下箭头键时不进行ajax调用下面是我的代码 HTML代码 <!doctype html> <html> <head> &l

我正在jquery中开发一个自动完成插件。结果将根据输入字段中的输入作为无序列表填充到div中。ajax调用是在keyUp事件中进行的。一切正常。现在我必须将导航添加到已填充的列表中。我在keyDown事件上执行此操作，导航工作正常，但在keyDown之后，会生成keyUp事件，并再次进行ajax调用

是否有一种方法可以添加导航，以便在向下箭头键时不进行ajax调用

下面是我的代码

HTML代码

<!doctype html>
<html>
<head>
<script type="text/javascript" src="@{'/public/javascripts/jquery-1.9.1.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/jquery-ui.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/comboBox.js'}"></script>
</head>
<body>
 <label class="formlabel">Vessel</label>
                <div id="vesselDropDown"></div>

</body>
<script>
$(document).ready(function(){
    $("#vesselDropDown").hermesComboBox({
        width:130,
        height:25,
        role:"vessel",
        URL:"application/vessel"
    });
});
</script>
</html>


容器
$（文档）.ready（函数（）{
$（“#vesselDropDown”）.hermesComboBox({
宽度：130，
身高：25，
角色：“船只”，
URL:“应用程序/容器”
});
});

插件代码

(function ( $ ) {
        $.fn.hermesComboBox = function( options ){

        var settings = $.extend({
            width:150,
            height:25,
            role:"none",
            minLength:3,
            URL:"none"
        },options);

        var elementId=settings.role; // inputField ID

        // positioning input field
        var inputWidth=settings.width;
        var inputHeight=settings.height-5;

        $(this).append('<input type="text" id="'+elementId+'"/>');
        $("#"+elementId).css({ width:inputWidth,height:inputHeight});
        $(this).append('<div id="resultContainer'+elementId+'"><ul></ul></div>');
        $("#resultContainer"+elementId).css({position:'absolute',left:-300,top:-300,background:'#eeeeee'});
        $("#resultContainer"+elementId).hide();

        $("#"+elementId).keyup(function(e){
            var inputValue=$(this).val(); 
            if(inputValue.length>=settings.minLength){

                $.post(settings.URL,{vesselCode:inputValue},function(data){
                    var dataSize=data.length;   
                    $("#resultContainer"+elementId).html("").append("<ul></ul>");
                    for(var i=0;i<dataSize;i++){
                        $("#resultContainer"+elementId+" ul").append('<li rel="'+data[i].vesselCode+'">'+data[i].vesselCode+','+data[i].vesselName+'</li>');
                    }

                });
                var position=$(this).position();
                var resultContainerleftPosition=position.left;
                var resultContainertopPosition=position.top+settings.height+5;

                $("#resultContainer"+elementId).fadeIn().css({ width:inputWidth,left:resultContainerleftPosition,top:resultContainertopPosition});

            }
        });

        $("#"+elementId).blur(function(){
            $("#resultContainer"+elementId).fadeOut()
        });

        var start = -1;
        $(document).on('keydown',"#"+elementId,function(e){

            if(e.keyCode == 38){
                if (start == -1){
                    start = ($("#resultContainer"+elementId+" ul li").size() - 1);  
                    }
                    else
                    {
                        start--;
                        if (start < 0){
                        start = ($("#resultContainer"+elementId+" ul li").size() - 1);  
                    }
                }
                $("#resultContainer"+elementId+" ul li").removeClass('active').focus();
                $("#resultContainer"+elementId+" ul li").eq(start).addClass('active').focus();
                e.preventDefault();
            }

            if(e.keyCode == 40){
                if (start == -1){
                    start = 0;  
                    }
                    else
                    {
                        start++;
                        if (start > ($("#resultContainer"+elementId+" ul li").size() - 1)){
                        start = 0;  
                    }
                }
                $("#resultContainer"+elementId+" ul li").removeClass('active').focus();
                $("#resultContainer"+elementId+" ul li").eq(start).addClass('active').focus();
                e.preventDefault();
            }

        });
    };
}(jQuery));

（函数（$）{
$.fn.hermesComboBox=函数（选项）{
变量设置=$.extend({
宽度：150，
身高：25，
角色：“无”，
最小长度：3，
URL:“无”
}，选项）；
var elementId=settings.role；//输入字段ID
//定位输入字段
var inputWidth=settings.width；
var inputHeight=设置高度-5；
$（此）。附加（“”）；
$（“#”+elementId）.css（{width:inputWidth，height:inputhweight}）；
$（this.append（“”）；
$（“#resultContainer”+elementId）.css（{位置：'absolute'，左：-300，上：-300，背景：'#eeeeee'}）；
$（“#resultContainer”+elementId）.hide（）；
$（“#”+elementId）.keyup（函数（e）{
var inputValue=$（this.val（）；
如果（inputValue.length>=settings.minLength）{
$.post（settings.URL，{vesselCode:inputValue}，函数（数据）{
var dataSize=data.length；
$（“#resultContainer”+elementId）.html（“”）.append（“”）；
对于（var i=0；i（$（“#resultContainer”+elementId+“ul li”）.size（）-1））{
开始=0；
}
}
$（“#resultContainer”+elementId+“ul li”）.removeClass（'active'）.focus（）；
$（“#resultContainer”+elementId+“ul li”）.eq（start）.addClass（'active'）.focus（）；
e、 预防默认值（）；
}
});
};
}（jQuery））；

请帮助或建议我实现这一目标的方法。

提前感谢

这很简单，只需在箭头键上禁用“自动完成”

...
if(!(e.which>=37 && e.which<=40)){
    // execute xhr and stuff..
}
...

。。。
如果（！（e.which>=37&&e.which设置变量，或检查DOM，以查看是否显示自动完成列表。然后，不要执行AJAX。您是否尝试过检查按下了哪个键，如果是箭头，则什么也不做？这与此问题非常类似：只需根据您的情况调整它。在keyup事件陷阱中，显示箭头键代码和ignor如果是箭头键，请调用ajax。但是，请看第二个答案，第一个答案（不幸的是被接受的答案）不兼容跨浏览器。非常感谢。你真的救了我的命：）这就是拯救生命的感觉。：P