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.