如何自定義返回的jQuery UI自動完成列表

Question

我有一個需求，我必須實現自動完成，但我不確定是否可以在jQuery UI自動完成中實現此目的。如果我不能在jQuery UI自動完成中做到這一點，你可以請建議可以做到這一點的圖書館，或者我應該建立自己的圖書館。

需求將是我有一個列表，這只是簡單的JavaScript有序數組，當用戶鍵入的東西文本框建議可能的結果。當用戶點擊結果時，列表應該改變，以顯示點擊結果上方的3個結果和點擊結果下方的3個結果。

這是我正在嘗試的代碼。

 

    $(function() { 
     var projects = [ 
      "List1","List2","List3","List4","List5","List6","List7","List8" 
     ]; 

     $("#project").autocomplete({ 
      minLength: 0, 
      source: projects, 
      focus: function(event, ui) { 
       $("#project").val(ui.item.label); 
       return false; 
      }, 
      select: function(event, ui) { 
       $("#project").val(ui.item.label); 
       return false; 
      } 
     }) 
     .data("autocomplete")._renderItem = function(ul, item) { 
      return $("
") 
       .data("item.autocomplete", item) 
       .append("" + item.label + "") 
       .appendTo(ul); 
     }; 
    }); 
 

例如，如果用戶鍵入 「禮」 應該彈出 「列表1」， 「列表2」， 「項目list3」， 「List4」， 「List5」。一旦用戶點擊「List3」，結果列表應該改爲「List1」，「List2」，「List3」，「List4」，「List5」，「List6」並忽略「List7」，「List8」

這甚至可能在jQuery UI自動完成？

Answer 1

是的它聽起來像你需要簡單地詢問哪個選項被引用，然後使用.next（）或.prev（）jquery函數。這些是相對的迭代工具（一個向前，一個向後），並有一點技巧，應該做你想做的。這是明顯的簡jQuery的，所以你就需要建立到你的聽衆這（在這種情況下擊鍵）

下一個：http://api.jquery.com/next/

一條：http://api.jquery.com/prev/