jQuery Autocomplete，如何允许用户提交与源中的值不匹配的输入

Question

我有一个自动完成功能。我想为用户提供从标准功能的源中选择项目的选项。但我还想让用户能够输入任何值，并且当源中匹配 0 个项目时，允许用户提交新值。

我一直在尝试以下操作:

    $("#rwF1, #rwF2").autocomplete({
        source: itemshere,

        select: function(event, ui) {
           console.log('selection made'); 

        }

    }).bind('keydown', function() {
        var key = event.keyCode;
        if (key == $.ui.keyCode.ENTER || key == $.ui.keyCode.NUMPAD_ENTER) {
            console.log('user submitted content');
        }
    });

对于绑定(bind) keydown，问题是即使进行选择，它也总是会触发。如何使绑定(bind) keydown 仅在用户未从自动完成中选择项目时触发？有没有一种方法可以检测用户是否选择了某个项目？

谢谢

Answer 1

您可以在每个 input 的 data-* 属性中存储一个变量，该变量保存一个值，指示是否选择了某个值。

这有一个警告，我将在代码后解释:

$("#rwF1, #rwF2").autocomplete({
    source: itemshere,
    select: function(event, ui) {
        $(this).data("selected", true);
    }
}).bind("keydown", function(e) {
    var $this = $(this);

    /* Use e.which, jQuery has normalized it across browsers */
    if (e.which === $.ui.keyCode.ENTER || 
        e.which === $.ui.keyCode.NUMPAD_ENTER) {

        /* If they selected an item... */
        if (!$this.data("selected")) {
            console.log("new item");
        } else {
            console.log('existing');
        }
    } else {
        $this.data("selected", false);
    }
});

示例: http://jsfiddle.net/aAD6W/2/

我提到的警告是，如果用户在列表中键入一个项目而没有选择它，则不会触发select。如果这对你来说是一个破坏性的事情，我可以提供一个解决方案(我没有在这里包含它，因为它增加了代码的复杂性)。