jQuery TagIt(autocomplete)通过AJAX获取JSON列表

时间:2012-06-19 12:46:08

标签: jquery json autocomplete

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

的问题

但是上面只是为我创建了一个'this.source is not function'的错误信息。

我试图让这个json列表通过ajax显示为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"}

5 个答案:

答案 0 :(得分:18)

结帐this code可能会对您有所帮助

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

答案 1 :(得分:4)

如果要使用自定义自动完成源(如Ajax / XHR响应),则应覆盖autocomplete.source。

例如:

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

答案 2 :(得分:3)

你可能应该使用类似的东西来成功处理:

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

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

答案 3 :(得分:3)

我认为您可以从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()
    }
});

答案 4 :(得分:2)

此错误是由我使用旧版本的标记引起的。如果您收到相同的错误,请确保您使用的是最新版本的tagit