自动完成 - 显示整个列表

时间:2012-02-22 13:47:19

标签: jquery jquery-ui autocomplete click jquery-ui-autocomplete

我有这段代码:

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 () {

});

但我不知道如何与自动完成对话。任何想法/解决方案?

2 个答案:

答案 0 :(得分:14)

@jasonlfunk就在那里 - 您必须在search上的自动填充小部件上调用focus才能使其生效:

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/

答案 1 :(得分: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());
});​;