source: function(request, response) {...}这是做什么的?为什么需要它。由于您正在执行自定义AJAX POST以获取数据,因此必须指定一个函数,该函数
response使用所需的自动完成候选者来调用回调。
在最简单的用例中,您只需为
source参数提供一个字符串,小部件将针对带有附加的URL发出GET请求
?term=(term)。由于您要执行POST并发送不同的术语,因此必须使用的功能版本
source。
PS:您应该提供$.ajax
呼叫request.term
而不是$(".find_group_ac").val()
function(data){response($。map(data,function(obj){返回的数据是什么格式?我知道数据是JSON格式的,但是.map的意义是什么?有必要这样做吗?有好处吗?
自动完成小部件期望数组数据源的项目满足以下要求之一:
- 该项目必须是单个字符串,或者:
- 该项目必须是具有
label
属性value
,,属性或两者兼有的对象。
考虑到这一点,如果您正在使用 未
以这种方式格式化JSON的服务器端资源,则必须在将数据提供给
response函数之前转换数据以符合那些规范。常用的方法是使用
$.map,它在数组上进行迭代并转换每个元素。
使用
appendTo和时renderItem,是否必须返回上述成功数据?
不,但是它们经常一起使用。
假设您有一个额外的属性(如
description)要显示在候选列表中。在这种情况下,您可以将服务器端结果转换为自动完成期望的格式(包括
label和
value仍然包括
description),但是您也想显示该
description属性。在这种情况下,您需要重载
_renderItem。
或者根据上述数据,如何正确使用appendTo和renderItem更改检索值的格式和显示?
如果在此答案中可以充分回答以上问题,那么我需要做的就是发布一些将这些概念整合在一起的代码:
$( ".find_group_ac" ).autocomplete({ minLength: 1, source: function(request, response) { $.ajax({ url: "welcome/search/", data: { term: $(".find_group_ac").val()}, dataType: "json", type: "POST", success: function(data) { response($.map(data, function(obj) { return { label: obj.name, value: obj.name, description: obj.description, id: obj.name // don't really need this unless you're using it elsewhere. }; })); } }); }}).data( "autocomplete" )._renderItem = function( ul, item ) { // Inside of _renderItem you can use any property that exists on each item that we built // with $.map above */ return $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.label + "<br>" + item.description + "</a>") .appendTo(ul);};jQueryUI文档页面上有关自动完成的示例实际上相当广泛,可能会有所帮助。具体来说,请务必签出:
- 自定义数据和显示
- 远程JSONP数据源



