Question

我正在jquery中开发一个autoComplete插件。结果在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>

插件代码

(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));

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

Answer 1

这很简单，只需在箭头键上禁用自动完成功能。

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

注意

还应该禁用其他键 - ctrl，shift，大写锁定，滚动锁定，F1，F2，实际上你应该禁用这么多按键，如果你只是允许你想要的按键会更容易因为他们很可能会按照数字顺序排列（ascii或其他）

在jquery中添加箭头键导航

1 个答案:

注意