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.

what kind of autocomplete? jquery? bootstrap? can you add some code what youve tried so far? — Black Ops, Dec 17 '13 at 11:51
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. — Srinivas, Dec 18 '13 at 10:38
I opened a similar question, as the answers suggested here did not work for me. See: https://stackoverflow.com/questions/44591954/autocomplete-how-to-get-automatically-value-on-focus-if-no-values-selected — J0ANMM, Jun 16 '17 at 16:58
Possible duplicate of [Select first jquery UI result automatically](https://stackoverflow.com/questions/9243441/select-first-jquery-ui-result-automatically) — sandeep.gosavi, Jun 30 '17 at 07:40

score 3 · Answer 1 · edited May 23 '17 at 10:30

3

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

edited May 23 '17 at 10:30

Community

1
1

answered Aug 16 '16 at 11:06

sandeep.gosavi

610
2
10
27

score 1 · Answer 2 · answered Dec 17 '13 at 11:57

1

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

answered Dec 17 '13 at 11:57

Salman A

262,204
82
430
521

score 1 · Answer 3 · answered Mar 06 '14 at 20:17

1

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

answered Mar 06 '14 at 20:17

Martin Meixger

2,547
24
26

score 1 · Answer 4 · edited Aug 03 '17 at 13:07

1

use

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

edited Aug 03 '17 at 13:07

Linga

10,379
10
52
104

answered Jun 16 '15 at 12:11

Chandikumar

139
11

3

From where does this came from ? I cannot find any reference to `selectFirst` in jquery ui sources or documentation. – tigrou Aug 18 '17 at 15:29

score 0 · Answer 5 · answered Dec 17 '13 at 12:07

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

})

score 0 · Answer 6 · answered Nov 01 '14 at 09:55

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

How To Select First Element in AutoComplete dropdown list

6 Answers6

Linked