JQuery 自动完成：如何强制从列表中选择（键盘）答案

【问题标题】：JQuery autocomplete: how to force selection from list (keyboard)JQuery 自动完成：如何强制从列表中选择（键盘）
【发布时间】：2012-07-27 04:05:30
【问题描述】：

我正在使用 JQuery UI 自动完成。一切都按预期工作，但是当我使用键盘上的向上/向下键循环时，我注意到文本框按预期填充了列表中的项目，但是当我到达列表末尾并再次按下向下箭头时时间，我输入的原始术语出现了，基本上允许用户提交该条目。

我的问题：有没有一种简单的方法可以将选择限制为列表中的项目，并从键盘选择中删除输入中的文本？

例如：如果我有一个包含{'Apples (AA)', 'Oranges (AAA)', 'Carrots (A)'} 的列表，如果用户键入“app”，我将自动选择列表中的第一项（此处为“Apples (AA)”），但如果用户按下向下箭头，“应用程序”再次出现在文本框中。我怎样才能防止这种情况发生？

谢谢。

【问题讨论】：

每次加载列表时都会触发一个事件。检查是否只有一个元素，然后向该项目触发click 事件或选择该项目
我总是选择第一项，但如果我使用键盘循环浏览列表，当我到达列表末尾时，它会显示文本框中的文本。这就是我要防止的；基本上，我希望它回到列表的顶部。
focus: function( event, ui ) { return false; }

标签： jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

对于强制选择，可以使用自动完成的"change" event

        var availableTags = [
            "ActionScript",
            "AppleScript"
        ];
        $("#tags").autocomplete({
            source: availableTags,
            change: function (event, ui) {
                if(!ui.item){
                    //http://api.jqueryui.com/autocomplete/#event-change -
                    // The item selected from the menu, if any. Otherwise the property is null
                    //so clear the item for force selection
                    $("#tags").val("");
                }

            }

        });

【讨论】：

这个解决方案的问题是，如果有人在字段中输入了非法值，然后按回车键，则表单会以非法值提交。仍在努力寻找优雅的解决方案。
一种可能的解决方案是从表单中删除type="submit" 并使用jQuery 来处理提交按钮上的点击事件。最后，服务器端验证是您唯一可以真正信任的东西。

【解决方案2】：

这两个其他答案结合起来效果很好。

另外，您可以使用 event.target 来清除文本。当您向多个控件添加自动完成功能或不想在选择器中输入两次时（存在可维护性问题），这会有所帮助。

$(".category").autocomplete({
    source: availableTags,
    change: function (event, ui) {
        if(!ui.item){
            $(event.target).val("");
        }
    }, 
    focus: function (event, ui) {
        return false;
    }
});

然而，应该注意的是，即使“焦点”返回 false，向上/向下键仍然会选择该值。取消此事件只会取消文本的替换。因此，“j”、“down”、“tab”仍将选择与“j”匹配的第一个项目。它只是不会在控件中显示它。

【讨论】：

这很有效。我正在使用 ajax 源，如果用户在加载选项之前点击选项卡，则更改不会清除结果。

【解决方案3】：

"Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused."

reference

焦点事件：

focus: function(e, ui) {
    return false;
}

【讨论】：

谢谢。这可以防止键盘导航填充文本框，从而完全绕过问题。
好吧，插入后，它解决了部分问题：当我用箭头键滚动时，文本框不再被填充，但我仍然能够返回文本框中的文本，因为向下键有一个“额外”插槽，可将焦点移出列表。我需要它专门留在列表中。有什么想法吗？
好吧，由于远程数据与传递的数据不同（没有 echo/json），因此很难在 jsfiddle 中显示，但是如果您在此处查看官方 jquery ui 演示：jqueryui.com/demos/autocomplete/#event-focus，如果您键入“j”然后上下移动键，您将传递列表中的项目，然后再次返回“j”。我想要做的就是防止“j”再次被选中，而是当我到达列表底部时返回顶部项目“Java”。

【解决方案4】：

定义一个变量

var inFocus = false;

将以下事件添加到您的输入中

.on('focus', function() {
    inFocus = true;
})
.on('blur', function() {
    inFocus = false;
})

并将keydown事件附加到窗口

$(window)
    .keydown(function(e){
        if(e.keyCode == 13 && inFocus) {
            e.preventDefault();
        }
    });

【讨论】：