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

问题描述：

我正在尝试基于自动将一些功能添加到jQuery插件 tag-it -complete:

I'm trying to add some functionality to jQuery plugin tag-it based on auto-complete :

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

a) I try to filtering my JSON data to display only name of tag.

/repo/json返回的JSON示例:

A JSON sample returned by /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，而不是名称.

b) I want to submit the id of the tag when user submits data, and not the name.

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

c) I try to add some constraint to my tag-it input field : user cannot validate a tag which is not in the JSON returned by my /repo/json call.

我不想派发tag-it存储库，似乎可以用beforeTagAdded选项测试用户数组和搜索之间的交集.

I don't want to fork tag-it repository, and it seems possible to to test intersection between user array and search with beforeTagAdded option.

这次我尝试不成功，因为我不知道在哪里可以找到实现十字路口的标签列表.

I try without success at this time, because I don't know where I can find the list of tags to realize intersection.

我的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>

答

您要求提交，但有所不同.然后让我们进入那个单一的入口点:

You ask you want to submit, something different. Then lets take that single point of entry:

$('#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的标签.

That should change the labels with the ids before submit.

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

lookup_tagid_for_label, could either do the ajax call again, but it may be cheaper to cache it on the field at first lookup:

$("#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).

与我的其他答案相反，该选项希望标签遵循autocomplete-api，此现在可以正常使用.

In contrary to my other answer, that expected tag-it to follow the autocomplete-api, this works now.

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

相关推荐