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

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的方式与修剪当前值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);

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;

    }

tagit：通过ajax将标记创建限制到给定列表

2 个答案: