Select first jquery UI result automatically

Question

I am using jQuery Autocomplete to search a local database of cities. Here is the code:

$('#txt_search_city').autocomplete({
    source: url,
    delay: 0,
    autoFocus: true,
    select: function( event, ui ) {
        $( "#id_city" ).val( ui.item.id );
        $(this).closest('form').submit();
    },
    focus: function( event, ui ) { event.preventDefault(); }
});

I'd like the first returned value to be selected by default (like it works on facebook). So essentially, if they just hit enter they will trigger the selection of the first result.

I thought that's what autoFocus: true did, but it isn't working. Not showing errors, just not selecting the first result.

Thoughts?

score 45 · Accepted Answer · edited Mar 15 '17 at 15:52

45

Autofocus will highlight the first record..

Your code would then just need to include autoFocus: true, like below:

$('#txt_search_city').autocomplete({
    source: url,
    delay: 0,
    autoFocus: true,
    select: function( event, ui ) {
        $( "#id_city" ).val( ui.item.id );
        $(this).closest('form').submit();
    },
    focus: function( event, ui ) { event.preventDefault(); }
});

edited Mar 15 '17 at 15:52

Slava.K

3,073
3
17
28

answered Feb 11 '12 at 19:49

Rick Burns

1,538
16
20

awesome, exactly what I needed – jjj Jul 14 '18 at 12:02

score 10 · Answer 2 · answered Apr 24 '13 at 12:18

10

This seems to be outdated. I had the same problem. Just use .autocomplete({autoFocus: true}) I'm using jquery-ui-1.10.0.min and it works now. No plug is needed.

answered Apr 24 '13 at 12:18

dorr Baume

178
1
11

3

It causes the first result to get focused , but it is not actually selected – Shai Aharoni Nov 06 '13 at 14:04
2

Yes. The user must press enter to confirm the autocomplete. I don't think it's wise to auto select and load the first hit after the user typed only two or three characters. – dorr Baume Nov 08 '13 at 09:52

Select first jquery UI result automatically

2 Answers2

Linked