jQuery-UI Autocomplete 的初始值为 "stuck"；没有按预期响应箭头键

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/

要重复问题:

1. 加载 fiddle 并聚焦输入。
2. 现在使用向上和向下箭头键尝试更改该值。
3. 您将仅看到初始值和仅包含初始值的下拉菜单。
4. 现在删除输入中的值并重复第 2 步。
5. 您将能够循环遍历所有可能的值，就像 <select> 一样。而且，您将能够通过键入字母来过滤值。

理想情况下，在第 3 步中，箭头键不仅会循环显示可能的值，而且会从最初输入的值(本例中为 green)开始。例如:

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

如何让自动完成功能按预期响应向上/向下箭头？

<小时/>

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

Answer 1

这是一种可能的解决方案:

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

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