Question

我有一个字段“帐户名”，它在文本框中使用 Jquery autosuggest 。在此处，当用户从自动提示值中进行选择并按“输入键”以填充所选值。目前我已使用“Jquery热键”插件映射“输入密钥”以提交表单。

问题是，一旦用户从autosuggest中选择值，如果他按“Enter”进行选择。表单已提交。当用户在autosuggest下拉列表中按下enterkey时，我不想提交表单。但是当焦点在autosuggest字段时，应该提交表单。

需要覆盖哪个功能？

这是我的代码段：

$(document).ready(function() {  
         var availableTags = [
            // abbreviations                  
            {"label":"academy - acad","value":"acad"},{"label":"accident - acc","value":"acc"},{"label":"account - acct","value":"acct"}];

    function split( val ) {
        return val.split(/\s\s*/ );
    }

    function extractLast( term ) {
        return split( term ).pop();         
    }

    $("#accountName").bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).data( "autocomplete" ).menu.active ) {
            event.preventDefault();
        }

    }).autocomplete({
        minLength: 2,
        autoFocus: false,

        source: function( request, response ) {             
            // delegate back to autocomplete, but extract the last term
            response( $.ui.autocomplete.filter(
                    availableTags, extractLast( request.term ) ) );
        },
        focus: function() {             
            // prevent value inserted on focus
            return false;
            //return false;
        },
        select: function( event, ui ) {             
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join(" ");

            // added to trim space
            $("#accountName").val($.trim($("#accountName").val()));

            return false;
        }
    });
});

Answer 1

停止select autocomplete事件的事件传播。

$( ".selector" ).autocomplete({
   select: function(event, ui) {  
       event.stopPropagation();
   }
});

Answer 2

keypress 上文字输入字段的默认行为是提交表单。

jQuery UI自动完成通过绑定 keydown 事件来工作，并检查菜单打开时是否按下了ENTER，如果是，则在按键上调用event.preventDefault() 。后续的输入不是preventDefault（除非菜单再次打开）。

所以这一切都很有效。

如果没有看到你的代码，我不能说更多，但我会说：让jQuery UI处理ENTER键，如果需要，可以绑定form.submit。

jquery autosuggest enterkey问题

2 个答案: