autocomplete - show the whole list

Question

I have this code :

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

and I'd like, when I click on the input box, show the list of all elements (with the same autocomplete box for choose value) of myList.

I suppose I need a third part handler, like :

myInput.focus(function () {

});

but I don't know how to dialogate with the autocomplete. Any ideas/solutions?

Priapic

Answer 1

@jasonlfunk is halfway there-- You have to call search on the autocomplete widget upon focus to get this to work:

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

Example: http://jsfiddle.net/BRDBd/

Berk

Actually, my solution is better because it handles the case where you type something, click away, and then focus the element again... But it's not a contest. – Slimsy

Answer 2

Take a look at the minLength option for the autocomplete plugin. Setting it to zero should do what you want.

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());
});​;

Slimsy

Uhm, no it doesnt work! jsfiddle.net/Ek8nS if I click on the input I can't see the list.. – Priapic