5

我正在使用 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']});
    });
    
4

2 回答 2

5

在回答您的第二个问题时,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);
于 2012-04-13T10:40:53.063 回答
0

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

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

    }
于 2012-04-26T11:08:36.807 回答