Question

In below jQuery the alert ‘fire’ is displayed every time a user types into the text box but is should just fire when the user types a letter that matches with ‘test’. How can below code be updated so that the alert just fires when a match is made instead of firing everytime as the user types ?

Select a project (type “j” for a start):

$(function() {

    $( "#project" ).autocomplete({
        minLength: 0,
 source: "/getfile?param=testerurl",
        focus: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            return false;
        },
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        alert('fire');
    };

});

Here is the json returned by

/getfile?param=testerurl

[{ "value": "test","label": "Sizzle JS","desc": "a pure-JavaScript CSS selector engine","icon": "sizzlejs_32x32.png"}]

Answer 1

_renderItem is used to edit/manipulate/style the json returned by your server, so it will trigger each time a response is returned.

jquery reference is here => http://jqueryui.com/autocomplete/#custom-data

and a working example here => http://jsfiddle.net/GtjEv/

 .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                .appendTo( ul );
        }