Javascript jQueryUI自动完成的问题

我编写了以下代码，在文本框上使用jQueryUI的自动完成方法

$(function() {
    $('#project').autocomplete({
            source: function(request, response){response(Object.getOwnPropertyNames(projects))},
            minLength: 0,
            messages: {noResults: '', results: function(){}},
            autoFocus: true
        }).on('focus', function(event) { //Display the suggestions list on focus
            $(this).autocomplete("search", "");
        });
})

我面临以下问题：

当单击文本字段时，会显示相应的建议列表，但自动聚焦不起作用。我想突出显示列表中的第一个值。但这就是我所得到的：

鼠标悬停时，列表元素会高亮显示，如下所示：

我使用以下样式来完成此任务：

.ui-autocomplete a:hover {background-color: #C1CDCD;cursor:default}

但是，当我使用上/下箭头导航列表时 相应的值显示在文本字段中，但元素显示在 列表不会突出显示

如何解决这些问题

这是我的建议

---

谢谢您的时间。

您可以通过使用“打开”和“聚焦”方法，然后关闭“自动聚焦”，使其不会取消高亮显示第一项来完成您想要的操作。我还使用了一个名为first open的类，允许在第一个项目最初失去焦点时再次突出显示它

代码：

codez：

projects = {Apple: "fruit",Apostle: "Saint"};
$(function () {
    $('#project').autocomplete({
        source: function (request, response) {
            response(Object.getOwnPropertyNames(projects));
        },
        minLength: 0,
        messages: {
            noResults: '',
            results: function () {}
        },
        //autoFocus: true,
        open: function( event, ui ) {
                $('.ui-autocomplete > li:first-child a').addClass('ui-state-focus first_open');
        },
        focus: function( event, ui ) {            
            if(ui.item.value != $('.ui-state-focus').text()){
                $('.first_open').removeClass('ui-state-focus first_open');
            }

       },    
    }).on('focus', function (event) { //Display the suggestions list on focus   
        $(this).autocomplete("search", "");

    });
});

---

你能发一个JSFIDLE吗？似乎有两个简单的css规则可以实现这一点。@Rooster:刚刚在问题中添加了一个小把戏，您缺少了jquery ui自动完成css。你不必设计它yourself@PabloMat阿斯戈麦斯：哦，我不知道。看看it@raul添加css并删除你的，然后问题就解决了，我测试它现在就像魔术一样工作！虽然我不太了解新代码，但是当建议打开时，列表中的第一项会得到类

first\u open

以及

ui状态焦点

，这是autosuggest用来突出显示的。然后一个项目被聚焦，需要从第一个项目中删除

ui状态聚焦

类，但只有第一次焦点被更改。这就是这两种方法的原理。