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

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的重点是什么？是否有必要这样做？ ？有好处吗？

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

1. 该项必须是单个字符串,或者:
2. 该项必须是具有labelproperty,a value,property或两者的对象.

考虑到这一点,如果您使用的服务器端资源的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数据源