Autocomplete to show all options on focus. How?

Question

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" />

score 15 · Accepted Answer · answered Sep 23 '09 at 09:09

15

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? :)

answered Sep 23 '09 at 09:09

inkredibl

1,918
1
14
19

1

Thanks inkredibl. That works. Well, i like dollars more the better :) – krishna Sep 23 '09 at 09:38
1

I tried this but you still need to press down arrow or click the control to actually show the autocomplete options. – Fajar Oct 13 '09 at 02:30
Maybe from a Perl background ? – alex Jun 11 '10 at 02:30
@Fajar What do you mean? Of course the user has to trigger it. If you want it to trigger automatically just call `click()` on it, i.e. `$('.autocompleteTime').click()` – alex Jun 11 '10 at 02:31
13

FYI, this is called "minLength" in recent versions of the plugin. – davidtbernal Jan 21 '11 at 01:25
@alex I think what @Fajar meant was that it doesn't trigger on initial focus - when the user first clicks into the autocomplete textbox he doesn't get the dropdown. He'd have to still type a character or press the up arrow to get suggestions. – tstyle Mar 28 '11 at 13:55
4

Awesome! I needed to do what @Fajar wanted to do. `$('.autocompleteTime').click(function(e){ $('#' + e.target.id).keydown() });` for this example would do the trick. And, @notJim's correction was right. – Furbeenator Jul 26 '12 at 00:03

score 10 · Answer 2 · answered Feb 26 '16 at 17:09

10

This is the correct answer:

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

answered Feb 26 '16 at 17:09

RayLoveless

19,880
21
76
94

score 6 · Answer 3 · edited May 23 '17 at 11:53

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

score 2 · Answer 4 · answered Mar 20 '12 at 00:06

2

Check out jQuery Ui's Autocomplete combobox example:

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

answered Mar 20 '12 at 00:06

mynameistechno

3,526
1
37
32

Problem with this is it does not allow input without choosing a selection – Trey Tyler Feb 24 '22 at 06:53

score 0 · Answer 5 · edited May 23 '17 at 12:25

0

That module has now been incorporated into the jQuery UI. This post covers how to deal with this problem now:

Jquery UI autocomplete; minLength:0 issue

edited May 23 '17 at 12:25

Community

1
1

answered May 13 '12 at 19:23

jerrygarciuh

21,158
26
82
139

Autocomplete to show all options on focus. How?

5 Answers5

Linked