jQuery TagIt（自动完成）通过 AJAX 获取 JSON 列表

Posted 2023-03-05

【中文标题】jQuery TagIt（自动完成）通过 AJAX 获取 JSON 列表

【英文标题】：jQuery TagIt (autocomplete) Fetching JSON list via AJAX

【发布时间】：2012-06-21 12:11:26

【问题描述】：

这是一个基于：Trying to get tag-it to work with an AJAX call的问题

但是上面的内容只是为我创建了一条错误消息“this.source is not a function”。

我试图通过 ajax 让这个 json 列表显示为 tagit 的标记源。代码如下：

// Tagit
$("#tags").tagit(      
    tagSource: function() 
        $.ajax(
            url: "/admin/ajax.php?q=fetch_all_tags",
            dataType: "json",
            success: function(data) 
                console.log(data);
                return data;
            
        );
           
);

ajax 调用返回：

"4":"php","2":"html","3":"css"

【参考方案1】：

这个错误是由我使用旧版本的标记引起的。如果您遇到同样的错误，请确保您使用的是最新版本的 tagit

【参考方案2】：

您可能应该为成功处理程序使用类似的东西：

success: function (categoriesList) 
    response($.map(categoriesList, function (category) 
        return 
            label: category.Name + " (ID: " + category.ID + ")",
            value: category.Name
        ;
    ));

我正在显示具有 ID 和 Name 属性的类别对象。

【参考方案3】：

查看this code 可能会对您有所帮助

$("#mytags").tagit(
    autocomplete: 
        source: function( request, response ) 
            /*call api*/
        
    
);

【讨论】：

非常感谢，@rjdmello 您的代码 sn-p 运行良好，这是这里的最佳答案。

【参考方案4】：

我认为您可以从 jquery UI 覆盖自动完成方法：

<!-- language: lang-js -->

$('.tags ul').tagit(

    itemName: 'question',
    fieldName: 'tags',
    removeConfirmation: true,
    //availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"]
    allowSpaces: true,
    // tagSource: ['foo', 'bar']
    tagSource: function () 
        $.ajax(
            url: "/autocomplete_tags.json",
            dataType: "json",
            data: 
                term: 'ruby'
            ,
            success: function (data) 
                console.log(data);
                return data;
            

        );
    ,
    autocomplete: 
        delay: 0,
        minLength: 2,
        source: this.tagSource()
    
);

【讨论】：

不适合我this.tagSource is not a function

【参考方案5】：

如果您想使用自定义自动完成源，例如 Ajax / XHR 响应，则应该覆盖 autocomplete.source。

例如：

$("#myTags").tagit(
    autocomplete: 
       delay: 0,
       minLength: 2,
       source : 'your data response'
    
);

【参考方案6】：

如果你是像我一样的新手并且不理解上述解决方案，这里有一个完整的代码

    $("#mySingleFieldTags").tagit(
      autocomplete: 
        source: function( request, response ) 
          console.log(request);
          $.ajax(
                url: "/autocomplete",
                dataType: "json",
                data: 
                  'search':request.term
                ,
                success: function (data) 
                    response($.map(data, function (category) 
                      return 
                          label: category.name,
                        
                      ;
                  ));
                
            );
          
      
    );