製作jQuery UI的自動完成小部件*實際*自動完成

Question

我需要一個自動完成的應用程序，我正在努力，因爲我已經在使用jQuery UI，我試圖讓自動完成小部件滿足我的需求。

第一步是使搜索詞只匹配建議詞的開頭。我已經有了這個工作，你可以在下面的代碼中看到。第二步是讓第一個建議實際自動完成。

這可能需要一點解釋。當我聽到「自動完成」時，我設想鍵入「f」並將文本字段的內容更改爲「foo」，並選擇「oo」，以便在我鍵入另一個字符並將其留在字段中時替換它我將其列出。我通常會調用Autocomplete小部件的建議，而不是自動完成。

看看Autocomplete如何在內部工作，我認爲autocompleteopen事件是正確的做法（每次更新建議列表時都會調用它），但我對如何訪問建議感到茫然從那裏列出。

有什麼想法？

$("#field").autocomplete({ 
    delay: 0, 

    source: function filter_realms(request, response) { 
     var term = request.term.toLowerCase(); 
     var length = term.length; 

     response($.grep(candidates, function(candidate) { 
      return candidate.substring(0, length).toLowerCase() === term; 
     })); 
    }, 

    open: function(event, ui) { 
     // magic happens here? 
    } 
}); 

Answer 1

明白了。我忘記了可以通過.data()訪問小部件。

$("#field").autocomplete({ 
    delay: 0, 

    source: function filter_realms(request, response) { 
     var term = request.term.toLowerCase(); 
     var length = term.length; 

     response($.grep(candidates, function(candidate) { 
      return candidate.substring(0, length).toLowerCase() === term; 
     })); 
    }, 

    open: function(event, ui) { 
     var current = this.value; 
     var suggested = $(this).data("autocomplete").menu.element.find("li:first-child a").text(); 

     this.value = suggested; 
     this.setSelectionRange(current.length, suggested.length); 
    } 
}); 

Answer 2

接受了長度檢查部分並修改了搜索內的過濾器功能。這樣你可以利用UI的JSON處理。

filter: function(array, term) { 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i"); 

    var smatcher = term.toLowerCase(); 
    var length = smatcher.length; 


    return $.grep(array, function(value) { 
       if(value.label.substring(0, length).toLowerCase() == smatcher){ 
        return matcher.test(value.label || value.value || value); 
       } 
    });