Question

当我使用auto completor时，我正在尝试使用自动完成，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，由成功回调处理它。

有一个关于在How to use the jQuery UI Autocomplete Widget使用函数回调作为源的好教程。

<强>更新

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

jQuery UI文档声明：

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

然后您的代码将更改为：

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

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

如何使自动完成功能与Jquery UI一起使用

1 个答案: