如何调用ajax自动完成功能?

时间:2012-11-26 07:29:56

标签: ajax jquery autocomplete

如何在特定时间调用ajax自动完成? 这是我的代码

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]);
         });
    }

但它说错误x.autocomplete不是函数

我打电话给上面就像是

auto("string");

任何人都可以帮我解决这个问题

提前致谢 如果有任何错误,我对英语不太好

1 个答案:

答案 0 :(得分:0)

我认为你混淆了jQuery自动完成的方式。在我看来,您将自动完成附加到您的字符串并构建建议的HTML元素。这不是自动完成功能的工作方式。

您要做的是将自动填充功能附加到输入框。然后,只要输入某些内容,自动完成功能就会自动在输入上激活。这就是它的构建方式。

所以让我们假设您的HTML代码中有一个ID等于myAwesomeInputBox的输入框:

<input type="text" id="myAwesomeInputBox"/>

要将自动完成(使用ajax)绑定到此输入字段,只需在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');
                    }
            });

对我来说棘手的部分是

response(responseArray); 

但是一旦你检查它,这是可以理解的。您只是将一个数组传递给jQuery自动完成处理程序以进行进一步处理。

我不确定以前版本的jQuery如何处理ajax自动完成,但这是版本1.8.0(和更高版本)处理它的方式。

相关问题