Select first jquery UI result automatically

Brenden picture Brenden · Feb 11, 2012 · Viewed 23.1k times · Source

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?

Answer

Rick Burns picture Rick Burns · Feb 11, 2012

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