jQuery标记它-使用值和标签对象列表

刚刚试了一个很好的标签！jquery（）的插件，但我无法让它按我希望的方式工作

我有这样一个对象列表：

var food = [{value:1,label:'Pizza'},{value:2,label:'Burger'},{value:3,label:'Salad'}];

我将其传递到设置中的tagSource选项：

$("#my_food_tags").tagit({
    tagSource: food,
    singleField: true,
    singleFieldNode: $("#my_food"),
    placeholderText: "Start typing a food name"
});

这很好，除了单击“自动完成”列表项时，它会在标记中显示数值，而不是食品名称

因此，有可能必须在隐藏字段中输入“值”，并将“标签”显示为标记名

这是我的意思的屏幕截图。该值出现在标记标签中，并且标签正在丢失到乙醚中；-）

有人能帮我吗？非常感谢

提前感谢,，

---

Seb已尝试使用它，请参见：

我所做的：

使用labelname扩展createTag函数

 createTag: function(labelname, value, additionalClass)

并在标签创建变量中调用它

var label = $(this.options.onTagClicked ? '<a class="tagit-label"></a>' : '<span class="tagit-label"></span>').text(labelname);

所以缺少什么，您需要确保它在所有createTag方法中传递labelname，但这不应该太难：）

---

---

使用FOCUS更新（受@Edwin启发）

我发现解决此问题的最简单方法是更改标记it Javascript源代码中的这一行：

that.createTag(ui.item.value);

到

这是我的编辑器中从第216行开始的代码自动完成部分的一部分：

// Autocomplete.
            if (this.options.availableTags || this.options.tagSource) {
                this._tagInput.autocomplete({
                    source: this.options.tagSource,
                    select: function(event, ui) {
                       // Lots of comments here
                        if (that._tagInput.val() === '') {
                            that.removeTag(that._lastTag(), false);
                        }
                        that.createTag(ui.item.value);
                        value.
                        return false;
                    }
                });
            }

---

在他用//Autocomplete注释的tag-it.js文件中，添加一个事件选项focus，如下所示。这应该可以解决它

 // Autocomplete.
        if (this.options.availableTags || this.options.tagSource || this.options.autocomplete.source) {
            var autocompleteOptions = {
                select: function(event, ui) {
                    that.createTag(ui.item.value);
                    // Preventing the tag input to be updated with the chosen value.
                    return false;
                },
                focus: function(event, ui) {
                    event.preventDefault();
                    that.tagInput.val(ui.item.label);
                }

            };

---

最简单的事情是获得真正支持这一点的插件。这是Select2或selected。

这里有另一个解决方法（假设您想使用数据id属性）：

附带的HTML：

<ul id="tags">
 <li data-id="38">Item A</li>
 <li data-id="19">Item B</li>
</ul>

项目A
项目B

覆盖

焦点

事件来处理标签和值并不简单。我的解决方案包括利用

close

创建标签，使用上次

ui的保存引用。项目
来自
focus
事件：

$$("#search-widget-input")
.tagit(
    {
    placeholderText : 'Select or type a location, postcode or Web ID',
    autocomplete : {
        delay : 200, 
        minLength : 1,
        search : function(event, ui) {
            ...
        },
        select: function(event, ui) {
            // use the item's label instead of value
            $$("#search-widget-input").tagit("createTag", ui.item.label, '__value__' + ui.item.value);
            return false; // prevents the tag input to auto tag the ui.item.value 
        },
        focus: function(event,ui) {
          // `focus` event does not fire `select` but does fires `close` event
          // so we store our `ui.item` which allows us to reference it in `close` event
          event.preventDefault();
          self.oAutoCompleteSavedLastUiItem = ui.item;
        },
        close: function(event, ui) {
          event.preventDefault();
          $$("#search-widget-input").tagit("createTag", self.oAutoCompleteSavedLastUiItem.label, '__value__' + self.oAutoCompleteSavedLastUiItem.value);
          return false; // prevents the tag input to auto tag the ui.item.value 
        },
        source : function fAutocompleteSource(oRequest, fResponse) {
            ...
        }
        ...
    }
    ...
});

嗨，我刚刚用PHP完成了我的项目

我在某个时候修改了插件，所以使用JSFIDLE脚本部分的脚本

看这里，我已经做了完整的工作键值对脚本


测试2

var tag_sources=[{value:1，标签：'test1'}，{value:2，标签：'test2'}]；
控制台日志（标记源）；
jQuery（文档）.ready（函数（）{
var eventTags=$（“#标记列表”）；
eventTags.tagit({
可用标记：标记来源，
字段名：“bento4_标签”，
单字段：对，
}); 
});

用FOCUS更新（灵感来自@Edwin和Marco Johannesen）
你能举个例子吗？在代码中，它将“标签”附加到LI，所以我认为它就是这样。但我想不会吧？：）当然，马可-我添加了一个屏幕截图来详细说明关闭按钮位于文本顶部。修正：将.addClass（“tagit-choice ui小部件内容ui状态默认ui角点全部”）更改为.addClass（“tagit-choice ui小部件内容ui状态默认ui角点全部tagit选项可编辑”），谢谢Marco:）。我注意到其中还有一个问题。如果我们使用向下箭头键选择建议，则标签的id将显示在文本框中。：）@AbhilashV你有没有找到解决你上次评论的方法？我有完全相同的问题。任何关于如何使用向下箭头的反馈都会很好。如果我现在使用它，它会显示数字。如上所述，如果您使用键盘选项（向下箭头），这个答案不起作用，我认为它是一个显示按钮。但是如果您想显示标签，但将Id存储在隐藏字段中，该怎么办谢谢您的分享。我发现Select2是一个不错的选择。这是一个很好的建议，但由于tag-it-Plugindo的传统用法根本不起作用，所以不能使用它。在这种情况下，
focus
的目的完全不清楚。为什么要为刚删除的项目分配id？
 // Autocomplete.
        if (this.options.availableTags || this.options.tagSource || this.options.autocomplete.source) {
            var autocompleteOptions = {
                select: function(event, ui) {
                    that.createTag(ui.item.value);
                    // Preventing the tag input to be updated with the chosen value.
                    return false;
                },
                focus: function(event, ui) {
                    event.preventDefault();
                    that.tagInput.val(ui.item.label);
                }

            };

  var clone = $('#tags').clone();
  // important to clone before calling tagit()
  $('#tags').tagit({
     beforeTagRemoved: function(event, ui) {
        var item_id = clone.find('li:contains('+ui.tagLabel+')').data('id');
        // do something with item_id / tag ui
     }
  });

<ul id="tags">
 <li data-id="38">Item A</li>
 <li data-id="19">Item B</li>
</ul>

$$("#search-widget-input")
.tagit(
    {
    placeholderText : 'Select or type a location, postcode or Web ID',
    autocomplete : {
        delay : 200, 
        minLength : 1,
        search : function(event, ui) {
            ...
        },
        select: function(event, ui) {
            // use the item's label instead of value
            $$("#search-widget-input").tagit("createTag", ui.item.label, '__value__' + ui.item.value);
            return false; // prevents the tag input to auto tag the ui.item.value 
        },
        focus: function(event,ui) {
          // `focus` event does not fire `select` but does fires `close` event
          // so we store our `ui.item` which allows us to reference it in `close` event
          event.preventDefault();
          self.oAutoCompleteSavedLastUiItem = ui.item;
        },
        close: function(event, ui) {
          event.preventDefault();
          $$("#search-widget-input").tagit("createTag", self.oAutoCompleteSavedLastUiItem.label, '__value__' + self.oAutoCompleteSavedLastUiItem.value);
          return false; // prevents the tag input to auto tag the ui.item.value 
        },
        source : function fAutocompleteSource(oRequest, fResponse) {
            ...
        }
        ...
    }
    ...
});

<ul id="tag_list">
      <li data-value="2">test2</li>
<ul>
<script>
var tag_sources = [{value:1,label:'test1'},{value:2,label:'test2'}];
            console.log(tag_sources);
            jQuery(document).ready(function() {
              var eventTags = $('#tag_list');
                   eventTags.tagit({
                    availableTags: tag_sources,
                    fieldName: "bento4_tags",
                    singleField: true,

                }); 
            });
</script>