jQuery UI自动完成问题

Question

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

$(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", "");
        });
})

我面临以下问题：

1. 单击文本字段时会显示相应的建议列表，但是autoFocus不起作用。 我希望列表中的第一个值突出显示。 但这就是我得到的一切：

2. 鼠标悬停时，列表元素将突出显示，如下所示：

   

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

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

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

我该如何解决这些问题？

这是JSFiddel 。

谢谢你的时间。

Answer 1

您可以通过使用open和focus方法来完成所需的操作，然后关闭自动对焦，以免突出显示第一项。 我还利用了一个称为first open的类，以便在开始失去焦点时再次突出显示第一个项目。

码：

JS菲德尔

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", "");

    });
});