Question

我有一个自动完成功能，几乎可以正常工作，因为我希望它能够正常工作。我遇到的问题是，一旦我开始搜索我的项目并得到一些建议，我就会使用我的箭头点击不同的建议。它切换输入字段本身的不同建议，但它不会移动到列表并“切换”它们。

这是我的代码

function () {
    $("#geosearch").autocomplete({
        minLength: 2,
        source: cities,
        focus: function (event, ui) {
            this.value = ui.item.label;
            event.preventDefault(); // Prevent the default focus behavior.
        },
        select: function( event, ui ) {
            addLocation(ui.item);
            return false;
        }

    });          
}

我需要添加什么才能使其正常工作？有趣的是，我找到的所有例子，都有一个工作的“箭头浏览”但我不会这样做:(

Answer 1

如果通过箭头浏览你指的是使用键盘的箭头键遍历建议列表，那么我认为你的焦点方法就是采取行动的方法。

是否有任何特殊原因可以添加“event.preventDefault（）;”在焦点事件？它可能正在取消焦点事件正确提升并通知jqueryui将所选项目上的突出显示移动到下一个/上一个。

Answer 2

列表的自动提供css类是

.ui-corner-all

当它突出显示时变为

.ui-state-focus

如果你为它写一个样式，问题就会得到解决。例如：

.ui-state-focus {
 background:#F00; 
}

jQuery UI自动完成 - 箭头不在结果列表上切换

2 个答案: