jquery autocomplete - type ahead execution with tab rather than selecting an autocomplete option

Question

I have a jquery autocomplete type ahead field. it is working 100% correctly and prompting me for values. It does however require that I click on the option I want to select.

if the type ahead value is 1234 and I click on 1234 it runs some logic with this value, alert in example below.

if however I type in 1234 and press tab, an autocomplete option is not selected and so the alert does not fire. how can I tell jquery to assume the typed in value is selected when pressing tab and not force the user to select an option from the type ahead autocomplete?

My syntax is below:

function callAutocomplete(element) 
{ 
    $(element).autocomplete( 
    { 
        source: "get_sku_codes", 
        messages: 
        { 
            noResults: '', 
            results: function() {} 
        }, 
        select: function( event, ui ) 
        { 
            var selectedObj = ui.item; 
            alert(selectedObj);
        } 
    }); 
}

to reiterate, I want to type 1234 into the input field, press tab and the autocomplete logic must be called as if I had clicked on the autocomplete suggestion '1234'.

Can this be done? Perhaps an onchange event for the input but how do I get the onchange function called to call the autocomplete logic?

Hope that makes sense.

Thanks as always.

Answer 1

I believe you want the autoFocus option:

If set to true the first item will automatically be focused when the menu is shown.

With that in mind, you'd simply need to change your initialization of the widget:

function callAutocomplete(element) 
{ 
    $(element).autocomplete( 
    { 
        source: "get_sku_codes", 
        messages: 
        { 
            noResults: '', 
            results: function() {} 
        }, 
        select: function( event, ui ) 
        { 
            var selectedObj = ui.item; 
            alert(selectedObj);
        },
        autoFocus: true
    }); 
}

Example: http://jsfiddle.net/WP29E/132/