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

Question

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

我有几个问题：

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

仅从 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']});
});

score 5 · Accepted Answer

在回答您的第二个问题时，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：

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

score 0 · Accepted Answer

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

当用户从列表中选择时，我想保存该标签的 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;

    }

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

2 回答 2

Related

Reference