小编典典

使用AJAX源代码和appendTo了解并实现jQuery自动完成功能

ajax

以下是我尝试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新手,甚至对我自己都是有价值的。


阅读 298

收藏
2020-07-26

共1个答案

小编典典

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的意义是什么?有必要这样做吗?有好处吗?

自动完成小部件期望数组数据源的项目满足以下要求之一:

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

考虑到这一点,如果您正在使用
以这种方式格式化JSON的服务器端资源,则必须在将数据提供给response函数之前转换数据以符合那些规范。常用的方法是使用$.map,它在数组上进行迭代并转换每个元素。


使用appendTo和时renderItem,是否必须返回上述成功数据?

不,但是它们经常一起使用。

假设您有一个额外的属性(如description)要显示在候选列表中。在这种情况下,您可以将服务器端结果转换为自动完成期望的格式(包括labelvalue仍然包括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文档页面上有关自动完成的示例实际上相当广泛,可能会有所帮助。具体来说,请务必签出:

2020-07-26