TAG-IT：阿贾克斯

Question

限制标签创建给定的名单我使用一个jQuery UI插件标签：

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

的具有1M的几个问题：

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

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

在回答标签，它储存库的第二个问题克里斯·雷斯曼的派生包含一个新的属性requireAutocomplete只允许自动完成列表中的项目将用作标记。

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

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

，并使用它像一个普通的属性：

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

关于你的第问题，我正在自己做这个，所以我会在找到解决方案时更新我的​​答案。

我在第271行改变而作出的修订，以我自己的本地TagIt.js：

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

到

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

其固定的问题，即项目的标识显示，而不是从自动完成列表中选择一个选项后的标签。

更新

下面是关于如何保存每个标签的ID的一些信息。

我所做的第一件事是覆盖createTag方法以包含一个labelName参数（如果需要，您可以修改原始设置，我只是希望重写它）。

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

修剪标签以同样的方式，目前的值参数是修剪：

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; 

    }