tagit : 通过 ajax 将标签创建限制在给定的列表中

Question

我正在使用 jquery ui 插件进行标记：

https://github.com/aehlke/tag-it

我有一些问题：

1. 当用户从列表中选择时，我想保存该标签的 id 和值。

2. 仅从 AJAX 调用返回的列表中创建标签

   $(function() {
     $('#tags').tagit({tagSource:function( request, response ) {
   $.ajax({
   type:"GET",
   url: "http://some_link",
   dataType: "jsonp",
   data:{
       term:request.term,
       }, 
       success: function( data ) {
           response( $.map( data, function( item ) {
               return {
                   label: item.label,
                   value: item.value,
                   id:item.id
               };  
           }));
       }   
       });
   }
   , triggerKeys: ['enter', 'comma', 'tab']});
   });
   

Answer 1

在回答您的第二个问题时，Chris Leishman 的 Tag-It 存储库分支包含一个新属性 requireAutocomplete，它只允许将自动完成列表中的项目用作标签。

你可以在这里找到他的拉取请求：https://github.com/aehlke/tag-it/pull/37

从https://github.com/chrisleishman/tag-it下载这个版本的JS文件

并像使用普通属性一样使用它：

$(selector).tagit({
        requireAutocomplete: true,
        tagSource: [...]
});

至于您的第一个问题，我自己正在解决这个问题，所以我会在找到解决方案后更新我的答案。

我在第 271 行对我自己的本地 TagIt.js 进行了修改：

var tag = that.createTag(ui.item.value);

到

var tag = that.createTag(ui.item.label);

解决了在从自动完成列表中选择选项后显示项目 ID 而不是标签的问题。

更新

这里有一些关于如何保存每个标签的 ID 的信息。

我做的第一件事是重写 createTag 方法以包含一个 labelName 参数（如果需要，您可以修改原始的，我只是更喜欢重写它）。

$.ui.tagit.prototype.createTag = function (labelName, value, additionalClass) {
 // The origional code from createTag here
}

以与修剪当前值参数相同的方式修剪 labelName：

value = $.trim(value);
labelName = $.trim(labelName)

更改标签变量以使用新的标签名称：

    var label = $(this.options.onTagClicked ? 
      '<a class="tagit-label"></a>' :
      '<span class="tagit-label"></span>').text(labelName);

在原始源代码的自动完成部分，我更改了对 createTag 的调用以包含新标签：

var tag = that.createTag(ui.item.label, ui.item.value);

Answer 2

此解决方案用于处理多个值和问题的答案：

当用户从列表中选择时，我想保存该标签的 id 和值。

它受到上述解决方案的启发（因此您需要阅读 :-)）：

var tag = that.createTag(ui.item); // since ui.item will have everything, label, value, id and other things

然后在createTag函数中

var item = value;
value = item.value;
...
 var tag = $('<li></li>')
            .data('tag_item_data',item)// add this line
            .addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all')
            .addClass(additionalClass)
            .append(label);

现在要检索标签，只需创建一个函数

 assignedTagsData : function(){
         // Only to be used when singleField option is not seletced
        var tags = [];

         this.tagList.children('.tagit-choice').each(function() {
                tags.push($(this).data('tag_item_data') );
            });
         return tags;

    }