修改基于自动完成库的jquery tag-it的行为以使用ajax JSON源 [英] Modify the behavior of jquery tag-it based on autocomplete library to use ajax JSON sources

查看:122
本文介绍了修改基于自动完成库的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源的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆