Question

以下是我尝试appendTo使用AJAX源代码处理jQuery自动完成功能。

我有多个问题，希望能帮助许多其他正在努力理解使用和AJAX源实现自动完成的正确方法的人。

1）source: function(request, response) {...} 这是做什么的？为什么需要它。

2）function(data){ response($.map (data, function(obj) {以什么格式返回数据？我意识到数据是JSON格式的，但.map的重点是什么？有必要这样做吗？有好处吗？

3a）使用appendTo和renderItem时，是否需要返回上述success数据？

3b）根据上述数据，或者，如何正确使用appendTo和renderItem来更改检索值的格式和显示？

$(function() {
$( ".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 + ': ' + obj.description,
                            value: obj.name,
                            id: obj.name
                };}));}
            });
        }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                .appendTo( ul );
        };
});

这可能看起来有很多东西要回答，但我相信它对许多javascript新手和我自己都很有价值。

Answer 1

source: function(request, response) {...}这是做什么用的？为什么需要它。

由于您正在进行自定义AJAX POST以获取数据，因此您必须指定一个函数，该函数使用所需的自动完成候选项调用response回调。

在最简单的用例中，您只需为source参数提供一个字符串，该窗口小部件将针对该URL发出GET请求，并附加?term=(term)。由于您正在执行POST并发送不同的术语，因此必须使用source的函数版本。

PS：您应该使用$.ajax代替request.term

提供$(".find_group_ac").val()来电

函数（数据）{response（$。map（data，function（obj）{ 返回数据？我意识到数据是JSON格式，但是是什么 .map的观点？有必要这样做吗？有好处吗？

自动完成小部件需要一个数组数据源，其项目符合以下要求之一：

该项目必须是单个字符串，或者：
该项必须是具有label属性，value，属性或两者的对象。

考虑到这一点，如果您使用的服务器端资源的JSON 不以这种方式格式化，则必须先将数据转换为符合这些规范，然后再将其提供给{ {1}}功能。执行此操作的常用方法是使用$.map，它迭代数组并转换每个元素。

使用response和appendTo时，是否需要返回上述成功数据？

不，但它们经常一起使用。

假设您要在候选列表中显示一个额外的属性（如renderItem）。在这种情况下，您可以将服务器端结果转换为自动完成预期格式（包括description和label但仍包含value），但您还要显示{{ 1}}属性。在这种情况下，您需要重载description。

根据上述数据，或者，如何正确使用appendTo和renderItem来更改检索值的格式和显示？

如果上面提到的问题在这个答案中得到了充分的回答，那么我需要做的就是发布一些将这些概念结合在一起的代码：

description

jQueryUI's documentation page for autocomplete上的示例实际上相当广泛，可能会有所帮助。具体来说，请务必查看：

使用AJAX源和appendTo理解和实现jQuery自动完成

1 个答案: