How To Select First Element in AutoComplete dropdown list

Question

Can any one help me how to select first element of autocomplete dropdown list if no element is selected? I tried with autoFocus. working for key board events. If I use mouse, the first element is not selecting which is auto focused.

Answer 1

visit here for answer

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

Answer 2

You can override the focus event to fill the textbox with the focused item's value:

$("#autocomplete2").autocomplete({
    // ...
    focus: function (event, ui) {
        $(this).val(ui.item.value);
    }
});

Demo here

Answer 3

Just use the autoFocus option: http://bugs.jqueryui.com/ticket/7419

Answer 4

use

$('selector').autocomplete({selectFirst:true});

Answer 5

http://jqueryui.com/autocomplete/#custom-data

Check the example code in the above link. Hope this will help.

$( "#project" ).autocomplete({
  minLength: 0,
  source: projects,
  focus: function( event, ui ) {
    $( "#project" ).val( ui.item.label );
    return false;
  },
  select: function( event, ui ) {
    $( "#project" ).val( ui.item.label );
    $( "#project-id" ).val( ui.item.value );
    $( "#project-description" ).html( ui.item.desc );
    $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
    return false;
 }

})

Answer 6

You have to just trigger select event of jquery to get first option selected.

$("#ElementID").autocomplete({
      source: availableList
 })._trigger('select');

You can find a detailed answer here: Language Lassi: Select first option using jQuery Autocomplete