javascript - jQuery - 当输入不是来自自动完成给出的列表时禁用回车键

Question

我很确定有一个简单的方法可以解决这个问题，但作为一个 JS 新手，我当然找不到解决方案。

目前我的代码有一个对 ajax 的自动完成调用来获取搜索结果，如下所示:

<input type="text" id="search" name="search">
    ....
<button type="submit" class="button large" id="programsearch">Search</button>


$('#search').autocomplete({
    source: '/ajax-get-data',
    minLength: 3,
    autoFocus: true,
    delay: 100
});

$( "#search" ).on( "autocompletechange", function( event, ui ) {
    if (! ui.item) {
        $(this).val('').attr('placeholder','try again - choose from the list');
    }
});

因此，如果您不从列表中进行选择并单击搜索按钮，输入将清除为空字段，验证器会将其视为空并抛出错误。但是，如果您输入某些内容并看到一个下拉列表，但您没有从列表中进行选择，则当您按 Enter 键时，它将提交。如果列表中没有选择任何内容(但输入字段中有一个值)，那么我如何才能绑定(bind)回车键将被禁用的条件？我尝试绑定(bind)一个 .keypress() 函数，但它基本上完全禁用了 Enter 键。

Answer 1

这可能不是最简单或最有效的方法 - 但它应该可以完成工作。我使用了两个全局变量，一个用于跟踪搜索字段的最后一个值，另一个用于跟踪是否选择了某个选项。如果搜索字段的值发生更改，则显然不会选择某个选项。仅当从列表中选择选项时，表单才会提交，并且占位符文本将通知用户，如果用户在框失去焦点时没有选择选项(因此会发生模糊事件)。

http://jsfiddle.net/Lu5811qt/1/

var submit = false;
var lastVal = $('#search').val();
$('#search').autocomplete({
    source: ['asp', 'jsp', 'javascript', 'php', 'python', 'ruby', 'mysql'],
    minLength: 1,
    autoFocus: true,
    delay: 100,
    select:function(e, ui){
        submit = true;
    }
}).on('keydown', function(){
    if(lastVal != $(this).val()){
        submit = false;
    }
    lastVal == $(this).val();
}).on('blur', function(){
    if(!submit){
        $(this).val('').attr('placeholder','try again - choose from the list');
    }
});;

$('#submit').on('click', function(e){
    if(submit){
        alert('submitting');
    }
    else{
        alert('cannot submit, please choose an autocomplete option');
        e.preventDefault();
    }
});

编辑:我还想提一下 - 你不应该仅仅依赖于此。因为它是 JS，所以客户端可以使用开发工具做一些有趣的事情。请务必在服务器上验证它。