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?

Slava.K · Accepted Answer · 2017-03-15 15:52:24Z

46

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, 2017 at 15:52

Slava.K

3,0803 gold badges19 silver badges28 bronze badges

answered Feb 11, 2012 at 19:49

Rick Burns

1,54616 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jjj Over a year ago

awesome, exactly what I needed

dorr Baume · Accepted Answer · 2013-04-24 12:18:17Z

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, 2013 at 12:18

dorr Baume

1781 silver badge11 bronze badges

2 Comments

Shai Aharoni Over a year ago

It causes the first result to get focused , but it is not actually selected

dorr Baume Over a year ago

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.

Collectives™ on Stack Overflow

Select first jquery UI result automatically

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related