jquery - 修改基于自动完成库的 jquery tag-it 的行为以使用 ajax JSON 源

Question

我正在尝试向 jQuery 插件添加一些功能 tag-it基于自动完成:

a) 我尝试过滤 JSON 数据以仅显示标签名称。

/repo/json 返回的 JSON 示例:

[{id:1, name:"0.8-alpha-1", category:"version"}, {id:2, name:"0.8-alpha-2", category:"version"}, {id:3, name:"0.8-alpha-3", category:"version"}, {id:4, name:"0.8-alpha-4", category:"version"}, {id:5, name:"0.8-alpha-1", category:"version"}, {id:6, name:"0.8-alpha-2", category:"version"}, {id:7, name:"0.8-alpha-3", category:"version"}, {id:8, name:"0.8-alpha-4", category:"version"}]

b) 我想在用户提交数据时提交标签的 id，而不是名称。

c) 我尝试向我的 tag-it 输入字段添加一些约束:用户无法验证不在我的 /repo/json call 返回的 JSON 中的标签。 .

我不想 fork tag-it 存储库，并且似乎可以使用 beforeTagAdded 测试用户数组和搜索之间的交集。选项。

我这次尝试没有成功，因为我不知道在哪里可以找到实现交集的标签列表。

我的js代码:

 $(function(){
    $("#singleFieldTags").tagit({
      tagSource: function(search, showChoices) {
        $.ajax({
          url: "/repo/json",
          dataType:   "json",
          data: {q: search.term},
          success: function(choices) {
            showChoices(choices);
          }
        })},
           beforeTagAdded: function(event, ui) {
           //if ($.inArray(ui.tagLabel, search) == -1) {
           //   $("#singleFieldTags").tagit("removeTagByLabel", ui.tagLabel);
           // }
            console.log(ui.tag);
           }});

    });

html 表单:

<form name="data" action="/repo/uploadMole" method="POST" enctype="multipart/form-data">
    <input name="tags" id="singleFieldTags" ><br/>
    <input type="Submit">
</form>

Answer 1

您询问是否要提交，一些不同的东西。然后让我们采用单一入口点:

$('#data').submit(function() {
    // Change the value we are submitting
    var tagids = [];
    $.each($('#singleFieldTags').val().split(','),
           function(idx, taglabel){
               tagids.push(lookup_tagid_for_label(taglabel));
           }
    )
    $('#singleFieldTags').val(tagids.join(','));          
    return true; // Let the event go on.
});

这应该在提交之前更改带有 id 的标签。

lookup_tagid_for_label，可以再次执行ajax调用，但在第一次查找时将其缓存在字段上可能会更便宜:

$("#singleFieldTags").tagit({
     autocomplete: {
        source: function(search, showChoices) {
                    $.getJSON("/repo/json", {q: search.term},
                        function (data) {
                            var choices = [];
                            $.each(data, function (idx, tag) {
                                choices.push(tag.name);
                                $("#singleFieldTags").data(tag.name, tag.id);
                            });
                            showChoices(choices);
                    });
                }
});

然后您可以将 lookup_tagid_for_label(taglabel) 替换为 $("#singleFieldTags").data(taglabel)。

与我的其他答案相反，期望 tag-it 遵循 autocomplete-api，这个 works now 。