如何使自动补全器与Jquery UI一起工作

Question

我正在尝试使用自动完成，当我使用自动完成器时，ajax调用可以完美地工作。但是下面的代码不起作用。如何正确设置数据源？

$("#searchbox").autocomplete({ source: [{
        var search_val = $("#searchbox").val();
    $.ajax( {
        type : "POST",
        url : "./wp-admin/admin-ajax.php",
        data : {
            action : 'wpay_search',
            user_name : search_val
        },
        success : function(data) {
        //$('#search_result').html(data);
        return data;
        }
    });
}] });

Answer 1

我认为一个更简单的方法是传入一个回调函数作为源函数，这将更灵活，更适合您想要完成的任务。根据jQuery UI文档：

回调得到两个参数：

• 一个请求对象，具有一个单术语属性，它引用当前文本输入中的值。例如，如果用户在城市字段中输入"new yo"，则"自动完成"项将等于"new yo"。

• 一个响应回调，它需要一个参数：向用户建议的数据。该数据应根据所提供的术语进行过滤，并且可以是上面针对简单本地数据描述的任何格式。在提供自定义源回调以处理请求期间的错误时，这一点非常重要。即使遇到错误，也必须始终调用响应回调。这样可以确保小部件始终具有正确的状态。

查看您的代码，它可能类似于：

$("#searchbox").autocomplete({ 
       //define the callback function
       source: function(request, response) {
                   $.ajax({
                        dataType: "json",
                        url: "./wp-admin/admin-ajax.php",
                        data: request,
                        success: function(data) {
                                   //create array for response objects  
                                   var acTerms = [];  
                                   //process response and add it to the array  
                                   $.each(data,function(i,val){                                
                                        acTerms.push(val.username);  //whatever your username property is
                                   });  
                                   //pass array to response callback  
                                   response(acTerms); 
                    });
        });
 });

PHP脚本将在作为数据发送的请求对象上使用"term"属性，以便检索适当的结果并回显生成的JSON，在那里它由成功回调处理。

在如何使用jQueryUIAutocompleteWidget中有一个关于使用函数回调作为源的好教程。

更新：

我回过头来，意识到处理AJAX请求的一个更简单的方法是将一个字符串传递给指向脚本URL的源回调。

jQuery UI文档状态：

• 当使用字符串[作为源类型]时，自动完成插件希望该字符串指向将返回JSON数据的URL资源。它可以在同一台主机上，也可以在不同的主机上（必须提供JSONP）。Autocomplete插件不过滤结果，而是添加了一个带有术语字段的查询字符串，服务器端脚本应该使用该字段来过滤结果。例如，如果源选项设置为"http://example.com"并且用户键入foo，则会向http://example.com?term=foo.数据本身可以采用与上述本地数据相同的格式

然后您的代码将更改为：

$("#searchbox").autocomplete({ 
       //define the callback function
       source: "./wp-admin/admin-ajax.php"
 });

您必须在PHP脚本中处理通过GET请求传递的术语（$_GET["term"]）。由于您的脚本返回一个以JSON格式编码的字符串，因此假设您的JSON格式正确，您的自动完成功能应该正确填充。