jQuery UI自動完成問題

我寫了下面的代碼，在文本框上使用jQuery UI的自動完成方法。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", ""); 
     }); 
})

我面臨以下問題：

雖然點擊文本字段確實顯示的建議對應的列表，自動對焦不起作用。我想要突出顯示列表中的第一個值。但是，這是我得到的：
在鼠標懸停時，列表元素，會突出顯示，像這樣：

我用下面的樣式來實現：
```
.ui-autocomplete a:hover {background-color: #C1CDCD;cursor:default} 
```
但是，當使用向上/向下箭頭瀏覽列表時，相應值顯示在文本字段中，但列表中的元素未突出顯示。

如何解決這些問題？

這是JSFiddel。

謝謝你的時間。

來源

2014-07-17 raul

你能發佈的jsfiddle？似乎有2個簡單的CSS規則可以實現這一點。 – Rooster

@Rooster：會做 – raul

@Rooster：剛剛添加小提琴的問題 – raul

您可以通過使用打開和對焦方法完成想要的功能，然後關閉自動對焦功能，使其不會忽略第一項。我還利用一個名爲first open的類來允許第一個項目在最初失去焦點時再次突出顯示。

代碼：

JS FIDDLE

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

    }); 
});

來源

2014-07-17 16:51:00 Rooster

像魔術一樣工作！儘管我不太瞭解新代碼 – raul

，所以當建議打開時，列表中的第一項獲得類first_open以及ui-state-focus，這是自動建議用於突出顯示的內容。然後一個項目被聚焦，'ui-state-focus'類需要從第一個項目中移除，但是隻有第一次焦點被改變。多數民衆贊成在這兩種方法發生了什麼。 – Rooster

jQuery UI自動完成問題

回答

相關問題