jQuery Question

Autocomplete using jQuery callback (label/value pair)

I am trying to implement autocomplete jQuery, but am not understanding the autocomplete function that jQuery UI provides.

It uses a callback function and gets the response as a label/value pair. I have some sample code where I am trying to pass an arbitrary label/value pair back and display that option but it isn't working. If someone can help me out with that or show me a simple program it will be great.

http://jsfiddle.net/kB25J/

HTML:

<html>
<body>
Please enter your country name
<input id ="book" type="text" value="">
</body>
</html>​


JavaScript:

$("#book").autocomplete({
source: function(request, response) {
alert(request.term);
response(function() {
return {
label: "hi",
value: "bye"
}
});
alert(reponse);
}
});



Thank You

Answer

When sending response, pass an array instead of function.

$(function() {
    $("#book").autocomplete({        
        source: function(request, response) {
            var data = [{
                    label: "hi",
                    value: "bye"
                    }];
            response(data);
        },
        select: function( event, ui ) {
            $( "#book" ).val( ui.item.label); //ui.item is your object from the array
            return false;
        }
    });
});​
Comments