[Jquery] 自动填充请求/服务器响应是什么样的?


Answers

除了Andrew Whitaker的完美答案之外,$ .map的一个替代方法是重写渲染器, 在jQuery UI Demo页面上显示了一个例子。

我已经使用这样的功能使用JSON调用:

JSON响应

{
   "Records": [
       {
           "WI_ID": "1",
           "Project": "ExampleProject",
           "Work_Item": "ExampleWorkItem",
           "Purchase_Order": "",
           "Price": "",
           "Comments": "",
           "Quoted_Hours": "",
           "Estimated_Hours": "",
           "Achieved": "False",
           "Used_Hours": "0"
       }
   ]
}

jQuery的

$("#WorkItem").autocomplete({
      source: function(request, response){
           $.ajax({
               type: "POST",
               url: "ASPWebServiceURL.asmx/WorkItems",
               data: "{'Project_ID':'1'}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (msg) {
                   response($.parseJSON(msg.d).Records);
               },
               error: function (msg) {
                   alert(msg.status + ' ' + msg.statusText);
               }
           })
       },

       select: function (event, ui) {
           $("#WorkItem").val(ui.item.Work_Item);
           return false;
       }
})
.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
    .data("item.autocomplete", item)
    .append("<a>" + item.Work_Item + "</a>")
    .appendTo(ul);
};

在这个例子中,_renderItem函数被覆盖,这样搜索结果列表(即出现在文本框下面的列表)将使用从JSON响应中检索到的记录的属性来填充。

虽然不是那么简单,它可以让你得到一些非常有趣的东西(例如使用来自JSON响应的多位数据)

Question

这似乎是一个黑洞:在搜索jQuery UI网站,堆栈溢出和谷歌搜索一小时后,我还没有找到如何编写AutoComplete的服务器端的最基本的信息。

什么参数传递给服务器,JSON响应应该是什么样的?

我一定会错过一些东西,因为其他人怎么学到这个呢? 网站似乎只讨论客户端的JavaScript代码,而不讨论协议或服务器端的例子。

我需要足够的最简单的远程示例工作。




你不需要调整服务器端脚本,以使用jQuery UI自动完成。 您可以指定一个JavaScript函数作为创建自定义请求的source (例如,使用POST或GET,使用serever侧脚本期望的查询字符串参数)并处理任意响应(例如处理XML响应)。

话虽如此,当你使用一个字符串作为source参数,那么:

[...]自动完成插件希望该字符串指向将返回JSON数据的URL资源。 它可以在同一个主机上或不同的主机上(必须提供JSONP)。 自动填充插件不会过滤搜索结果,而是在查询字符串中添加一个术语字段,服务器端脚本应该使用该术语字段来过滤结果。 例如,如果source选项设置为http://example.com ,并且用户键入foo,则会向http://example.com?term=foo发出GET请求。 数据本身可以采用与上述本地数据相同的格式。

关于“数据本身可以采用与上述本地数据相同的格式” ,以下JSON(或JSONP)格式将起作用:

// no matching entries
[]

// array of strings
[
"Option 1",
"Option 2"
]

// array of objects with label property
[{
    "label": "Option 1"
}, {
    "label": "Option 2"
}]

// array of objects with value property
[{
    "value": "Option 1"
}, {
    "value": "Option 2"
}]

// array of objects with label and value properties
[{
    "label": "Option 1",
    "value": 1
}, {
    "label": "Option 2",
    "value": 2
}]

对于对象数组,您可以自由指定除标签和/或value之外的其他属性。 所有的属性将在回调中可用。




以下代码正在为我工​​作。 这需要json编码的数据才能工作。 一旦我们获得数据,它会根据jQuery自动完成格式对其进行修改,并启用选择

var $url = "http://some-url/get-json";
//name is the id of the textbox where autocomplete needs to be shown
$('#name').autocomplete(
{ 
source: function(request,response)  
{ 

  //gets data from the url in JSON format
  $.get($url, function(data)
  {         
    obj = JSON.parse(data);   //parse the data in JSON (if not already)
    response($.map(obj, function(item)
    {
      return {
        label: item.full_name,
        value: item.full_name,
        id:item.id,
        email:item.email,
        phone:item.phone,
      }
    }
  ));        //end response
});          //end get
},
select:function(event, ui)
{ 
 console.log(ui.item.full_name);
 console.log(ui.item.email);
}   

}); //end of autocomplete