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.

Curtcurtail

what kind of autocomplete? jquery? bootstrap? can you add some code what youve tried so far? – Griefstricken

Simply go to www.redbus.in and start enter a city name. Don't enter complete city name and go to next field.Even though if you don't enter complete city name automatically the first one will be selected. Like That I need.Thanks for your reply. – Curtcurtail

I opened a similar question, as the answers suggested here did not work for me. See: #44592454 – Daunt

Possible duplicate of Select first jquery UI result automatically – Nepotism

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

Nepotism

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

Predator

Answer 3

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

Unhook

Answer 4

use

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

Nonperishable

From where does this came from ? I cannot find any reference to selectFirst in jquery ui sources or documentation. – Add

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

})

Frankish

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

Inexpressible