4

我正在尝试基于自动完成向 jQuery 插件标记添加一些功能：

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

由以下人员返回的 JSON 样本/repo/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 输入字段中添加一些约束：用户无法验证不在我返回的 JSON 中的标签/repo/json call。

我不想分叉 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>
4

2 回答 2

5

你问你要提交，不同的东西。然后让我们采取那个单一的入口点：

$('#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，现在可以使用。

于 2013-04-02T12:00:06.480 回答
0

添加标签时更改标签会破坏删除以及其他可能的事情。您可以尝试通过编写beforeTagRemoved处理程序以及将来可能的其他处理程序来缓解这种情况。（维持痛苦）。

正如我评论的那样，您应该使用自动完成 api。该文档进一步指向jquery-ui。数据可以是这种形式：

...具有标签和值属性的对象数组： [ { label: "Choice1", value: "value1" }, ... ]

所以我怀疑这可能就足够了：

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

遗憾的是，这不像 tag-it 那样工作，目前在创建标签时会删除标签并仅使用 id。我认为应该清理 tag-it 并支持完整的自动完成 api。

更新

维护者同意这一点。所以这个答案可能会成为未来的规范答案。

于 2013-03-30T10:03:45.730 回答