How to call a ajax autocomplete function? - ajax

Question

How to call the ajax auto complete when particular time?
here this is my code
function auto(x){
x.autocomplete('ajax/getFriends',{
max:500,
width:300,
minChars:2,
autoFill: false,
formatItem: formatItem,
formatResult: formatResult
});
function formatItem(row) {
return row[0];
//return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}
function formatResult(row) {
return row[0].replace(/(<.+?>)/gi, '');
}
$("#comment").result(function(event, data, formatted) {
$("#test1").val(data[1]);
$("#test2").val(data[2]);
});
}
but it says error x.autocomplete is not a function
i am calling the above is like
auto("string");
can any one help me how to solve this one
Thanks in advance
i am not good in english if any mistakes excuse me

Answer 1

I think you are confusing the way jQuery autocomplete works alltogether. It seems to me that you are attaching autocomplete to your string and building up the HTML elements for the suggestions. This is not how the autocomplete functionality works.
What you want to do is attach the autocomplete functionality to your input box. Then whenever something is entered in there the autocomplete function fires automatically on the input. That's just how it's built.
So let's say for instance you have an input box with an ID equal to myAwesomeInputBox in your HTML code:
<input type="text" id="myAwesomeInputBox"/>
To bind autocomplete (with ajax) to this input field just do this in Javascript:
$("#myAwesomeInputBox").autocomplete({
source: function( request, response ) {
// request.term is the input in the textbox, encode for security reasons
var input = encodeURI(request.term);
$.ajax({
// your ajax endpoint
url: 'ajax/getFriends',
// the request method, modify to your actual method
type: 'GET',
// whatever data you want to pass to your endpoint.
// I'm assuming at least the input (with key userInput here)
// and maybe the limit of the elements in the response array
// the server should send back
data: {userInput: input, limit: 500},
// what to do on success (process the response)
success: function(data){
// assuming your ajax endpoint returns a JSON encoded array with the suggestions as a response
var responseArray = $.parseJSON(data);
// pass the decoded response array to the jquery defined response method for autocomplete
response(responseArray);
},
// what to do if the server returns an error
error: function(jqXHR, textStatus, errorThrown){
// pass an empty suggestions array maybe?
response(new Array());
}
}, 'json');
}
});
The tricky part for me was
response(responseArray);
but once you examine it it's quite understandable. You're just passing an array to the jQuery autocomplete handler for further processing.
I'm not sure how previous versions of jQuery handled ajax autocomplete but this is how version 1.8.0 (and up) handles it.