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

Understanding and implementing jQuery autocomplete with AJAX source and appendTo

提问by Ricky Mason

Below is my attempt at getting appendToto work with jQuery autocomplete with AJAX source.

下面是我尝试appendTo使用 AJAX 源使用 jQuery 自动完成功能的尝试。

I have multiple questions, which will hopefully help many others who are struggling with understanding the correct way to implement autocomplete with and AJAX source.

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

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

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

2) 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?

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

3a) When using appendToand renderItem, is it necessary to have the above mentioned successdata returned?

3a) 使用appendToand 时renderItem，是否需要success返回上述数据？

3b) 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?

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 );
        };
});

This might seem like a lot to answer, but I'm sure it will be valuable to many javascript newbies and certainly myself.

这似乎有很多问题需要回答，但我相信它对许多 javascript 新手和我自己来说都是有价值的。

回答by Andrew Whitaker

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

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

Since you're doing a custom AJAX POST to get the data, you must specify a function that calls the responsecallback with the desired autocomplete candidates.

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

In the simplest use case, you can just supply a string to the sourceparameter, and the widget will issue a GET request against that URL with an appended ?term=(term). Since you're doing a POST and sending up a different term, you must use the function version of source.

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

PS: You should supply the $.ajaxcall with request.terminstead of $(".find_group_ac").val()

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?

function(data){ response($.map (data, function(obj) { return the data in ? 有好处吗？

The autocomplete widget expects an array data source who's items meet one of the following requirements:

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

1. The item must be a single string, or:
2. The item must be an object with a labelproperty, a value, property, or both.

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

With this in mind, if you're using a server-side resource whose JSON is notformatted in this way, you have to transform the data to meet those specifications before supplying it to the responsefunction. The common way to do this is to use $.map, which iterates over an array and transforms each element.

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

---

---

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

使用appendToand 时renderItem，是否需要返回上述成功数据？

No, but they are often used together.

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

Say you have an extra property (like description) that you want to display in the candidate list. In this case, you might transform the server-side result into the format autocomplete expects (to include labeland valuebut still include description), but you also want to display the descriptionproperty. In this case, you'll need to overload _renderItem.

假设您有一个额外的属性（如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?

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

If the questions asked above this ones are answered adequately in this answer, then all I should need to do is post some code that brings the concepts together:

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

$( ".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);
};

The examples on jQueryUI's documentation page for autocompleteare actually quite extensive and could be helpful. Specifically, be sure to check out:

jQueryUI 的自动完成文档页面上的示例实际上非常广泛，可能会有所帮助。具体来说，一定要检查：

• Custom data and display
• Remote JSONP data source

• 自定义数据和显示
• 远程 JSONP 数据源