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

从以下网址下载此版本的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
}

修剪labelName的方式与修剪当前值param的方式相同:

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

更改label变量以使用新的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);