2012-02-22 58 views
3

我有這樣的代碼:自動完成 - 顯示整個列表

var myList = [ "Avellino", "Enna", "Frosinone" ]; 

myInput.autocomplete({ 
    source: function(request, response) {    
     var data = $.grep(myList, function(value) { 
      return value.substring(0, request.term.length).toLowerCase() == request.term.toLowerCase(); 
     });    

     response(data); 
    },   
    appendTo: "#myDiv" 
}); 

,我想,當我點擊輸入框,顯示所有元素的列表(與選擇的值相同的自動完成框)的myList

我想我需要一個第三部分的處理程序,如:

myInput.focus(function() { 

}); 

,但我不知道如何使用自動完成dialogate。任何想法/解決方案?

回答

13

@jasonlfunk是半路那裏 - 你必須在focus調用search在自動完成構件來得到這個工作:

var myList = [ "Avellino", "Enna", "Frosinone" ]; 

$('#myInput').autocomplete({ 
    minLength: 0, 
    source: function(request, response) {    
     var data = $.grep(myList, function(value) { 
      return value.substring(0, request.term.length).toLowerCase() == request.term.toLowerCase(); 
     });    

     response(data); 
    } 
}).focus(function() { 
    $(this).autocomplete("search", ""); 
}); 

例子:http://jsfiddle.net/BRDBd/

+0

它完美的作品!謝謝! – markzzz 2012-02-22 14:21:42

+0

實際上,我的解決方案更好,因爲它處理的情況下,您鍵入的東西,點擊離開,然後再次集中元素...但它不是一個比賽。 – jasonlfunk 2012-02-22 14:53:39

4

查看自動完成插件的minLength選項。將它設置爲零應該做你想要的。

var myList = [ "Avellino", "Enna", "Frosinone" ]; 

myInput.autocomplete({ 
    minLength: 0, 
    source: function(request, response) {    
     var data = $.grep(myList, function(value) { 
      return value.substring(0, request.term.length).toLowerCase() == request.term.toLowerCase(); 
     });    

     response(data); 
    },   
    appendTo: "#myDiv" 
}).focus(function(){ 
    $(this).autocomplete("search",$(this).val()); 
});​; 
+0

嗯,沒有它不工作! http://jsfiddle.net/Ek8nS/如果我點擊輸入,我看不到列表.. – markzzz 2012-02-22 13:57:33

+0

你說得對!抱歉。我更新了我的答案。現在它可以工作。 :) – jasonlfunk 2012-02-22 14:26:53

+0

完美答案,謝謝老兄:) – 2017-02-11 11:59:33