Question

I have next function for autocomplete an input:

$("#auto").autocomplete({
        source:"/autocomplete.php",
        minLength: 5,
        _renderItem: function( ul, item) { 
            return $( "<li></li>" ) 
                .data( "item.autocomplete", item ) 
                .append( $( "<a></a>" ).text( item.label ) ) 
                .appendTo( ul ); 
            }   

});

The JSON array contains 3 parameters ( value , label , extra ). How could I grab the third parameter and append it to another input text right after an element from autocomplete list has been selected?

Answer 1

Use the select event.

The event handler gets passed two parameters:

• the event object
• a ui object which contains the data of the selected item in ui.item

Example:

$("#auto").autocomplete({
        source:"/autocomplete.php",
        minLength: 5,
        select: function(e, ui) {
            // "ui.item" is the data item
            alert(ui.item.extra);
        }    
});

---

BTW, the way you try to override the _renderItem method is not correct, it should be:

$("#auto").autocomplete({
    source:"/autocomplete.php",
    minLength: 5,
})
.data('autocomplete')
._renderItem = function( ul, item) { 
    return $( "<li></li>" ) 
        .data( "item.autocomplete", item ) 
        .append( $( "<a></a>" ).text( item.label ) ) 
        .appendTo( ul ); 
};