Question

我有<input>个使用自动填充的元素，它们也有初始值问题是我的用户希望点击输入并使用向上/向下箭头键来更改这些值 - 就像自动完成允许时，如果没有初始值（也像<select>行为一样）。

HTML：

<label>
    Input with 4 possible values:
    <input type="text" value="green" id="tstInp">
</label>

jQuery的：

$("#tstInp").autocomplete ( {
    delay: 0,
    minLength: 0,
    source: ["red", "green", "blue", "yellow"]
} )

的jsfiddle：

jsfiddle.net/v0b4ymch/

要复制问题：

加载小提琴并聚焦输入。
现在使用向上和向下箭头键尝试更改值。
您只会看到初始值和只有初始值的下拉列表。
现在从输入中删除值并重复步骤2.
您可以循环浏览所有可能的值，就像使用<select>一样。并且，您可以通过键入字母来过滤值。

理想情况下，在步骤3中，不仅箭头键会循环显示可能的值，而且它们将以最初输入的值（此示例中为green）启动。 EG：

预期行为和当前自动完成之间的唯一区别是，在输入聚焦后，初始向上/向下箭头键应显示所有可能的值 - 理想情况下，初始值已经集中在下拉菜单。

如何获得自动完成功能以按预期响应上/下箭头？

我正在使用jQuery 2.1.0和jQuery-UI 1.11.1。

Answer 1

这就是它应该如何表现，当你输入一个值并且如果该值在列表中没有匹配时，它将不会显示任何内容，如果它有一个或多个匹配，那么它将显示那些匹配的值。我希望这 jsfiddle会帮助您理解。

source: ["red", "green", "greenish", "blue", "yellow"]

Answer 2

http://jsfiddle.net/v0b4ymch/2/

传递源选项的功能，不要过滤结果

var src = ['red', 'green', 'blue', 'yellow'];

$("#tstInp").autocomplete({
    source: function (request, response) {
        response(src);
    }
});

请参阅this question

Answer 3

以下是一种可能的解决方案：

使用向下箭头键打开下拉列表时显示所有值
回退到默认行为，否则

var source = ["red", "green", "blue", "yellow"],
    showall;
$("#autocomplete1").autocomplete({
    minLength: 0,
    search: function(event, ui) {
        showall = event.which === 40;
    },
    source: function(request, response) {
        response(showall ? source : $.ui.autocomplete.filter(source, request.term));
    }
});

Demo Here

原始答案：

可以通过（i）设置minLength: 0（ii）调用search方法并传递空字符串来打开下拉列表并手动显示所有值（例如，单击按钮）。您可以在文本框的焦点事件中执行此操作，或者为此添加专用按钮。

Old Demo Here

jQuery-UI自动完成是＆＃34;卡住＆＃34;在初始值;没有按预期响应箭头键

3 个答案: