JQueryUI Autocomplete: autoFocus = true won't do anything

Question

I have this input with autocomplete function:

.autocomplete({ source: "jsonR.php", minLength: 2, select: function( event, ui ) { $(this).val(ui.item.value); llamar('/includes/router.php?nomenu=1&que=view_item&id='+ui.item.id,'router'); return false; }, autoFocus: true ,open: function() { $('.ui-autocomplete').addClass('searchBox'); } }) 

Basically, I want the function to select the first element, so if the user gets into it, it searches for the first but it will not overhang / focus the first suggested item,

any idea why?

ps: the rest works fine, the dough

Answer 1

Scott Gonzalez wrote a selectfirst plugin for this.

See details here: http://forum.jquery.com/topic/autocomplete-automatically-select-first-item-in-dropdown-or-add-item-into-drop-down-menu

You can download the plugin here: https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.selectFirst.js

even better, here is the source code of the plugin :)

 /* * jQuery UI Autocomplete Select First Extension * * Copyright 2010, Scott González (http://scottgonzalez.com) * Dual licensed under the MIT or GPL Version 2 licenses. * * http://github.com/scottgonzalez/jquery-ui-extensions */ (function( $ ) { $( ".ui-autocomplete-input" ).live( "autocompleteopen", function() { var autocomplete = $( this ).data( "autocomplete" ), menu = autocomplete.menu; if ( !autocomplete.options.selectFirst ) { return; } menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first() ); }); }( jQuery )); 

NOTE. To use this, just add this line to your autocomplete:

 selectFirst: true, // auto selects first element