Autocomplete to show all options on focus. How?

Question

I'm using jQuery UI autocomplete.

How do I show all the options available in the dropdown for an input field when it receives focus? Right now, I have to type something for the plugin to filter the options.

What I have right now

var $sessionTimes = "00:00 00:15 00:30 00:45 1:00 1:15".split(" ");
$(".autocompleteTime").autocomplete($sessionTimes);

<input type="text" class="autocompleteTime" size="5" />

Answer 1

You have to set minChars to be 0, like this:

$('.autocompleteTime').autocomplete($sessionTimes, {minChars: 0});

Also note that you don't have to start variable name with a $, you could just write sessionTimes everywhere you use it and it would be okay. Probably coming from a PHP background? :)

Answer 2

This is the correct answer:

    $('.autocompleteTime').autocomplete($sessionTimes, {minChars: 0})
    .focus(function () {
        $(this).autocomplete('search', $(this).val())
    });

Answer 3

The selected answer is a bit old and didn't really work for me, so what worked for me was this:

$('#selector')
    //use minLength when initializing so that empty searches work
    .autocomplete({..., minLength: 0})
    //trigger the search on focus
    .focus(function(){
        $(this).autocomplete('search', $(this).val());
    })

Credits to the comment by @notJim above and this question: Display jquery ui auto-complete list on focus event, and to me

Answer 4

Check out jQuery Ui's Autocomplete combobox example:

http://jqueryui.com/demos/autocomplete/#combobox