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

Question

下面是我尝试让 appendTo 与 AJAX 源一起使用 jQuery 自动完成功能。

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

1) 来源:函数(请求，响应){...} 这是做什么的？为什么需要它。

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 新手以及我自己来说都是有值(value)的。

Answer 1

source: function(request, response) {...} What does this do? Why is it needed.

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

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

PS:您应该为 $.ajax 调用提供 request.term 而不是 $(".find_group_ac").val()

---

What format does function(data){ response($.map (data, function(obj) { return the data in? I realize the data is in JSON format, but what is the point of .map? Is it necessary to do this? Are there benefits?

自动完成小部件需要一个数组数据源，其项目满足以下要求之一:

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

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

---

When using appendTo and renderItem, is it necessary to have the above mentioned success data returned?

没有，但它们经常一起使用。

假设您有一个额外的属性(如 description )要显示在候选列表中。在这种情况下，您可能会将服务器端结果转换为自动完成预期的格式(包括 label 和 value 但仍包括 description )，但您还希望显示 description 属性。在这种情况下，您需要重载 _renderItem 。

---

Either or, depending on the above data, how do you correctly use appendTo and renderItem to change the formatting and display of your retrieved values?

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

$( ".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's documentation page for autocomplete 上的示例实际上非常广泛，可能会有所帮助。具体来说，请务必查看:

• Custom data and display
• Remote JSONP data source