javascript - 标签 : limiting tag creation to the given list by 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

从以下位置下载此版本的 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 而不是标签的问题。

更新

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

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

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

以与 trim 当前值参数相同的方式 trim 标签名称:

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);