Question

刚试过优秀的Tag-It！ jquery插件（http://aehlke.github.com/tag-it/），但是我无法按照我想要的方式工作。

我有一个像这样的对象列表：

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

这很好用，除非我点击自动完成列表项，它会在标记中显示数字值，而不是食物名称。

因此，可以在隐藏字段中输入'value'，并将'label'显示为标记名称？

这是我的意思的屏幕截图。该值出现在标签标签中，标签丢失到以太网; - ）

Example of label text being lost

有人可以帮我吗？非常感谢！

提前致谢， SEB

Answer 1

尝试使用它，请参阅：http://jsfiddle.net/pDrzx/46/

我做了什么：

使用labelname

扩展createTag函数

 createTag: function(labelname, value, additionalClass)

并在标签创建var

上调用它

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

然后我确保隐藏的输入字段具有数字值（用于保存目的）

  if (this.options.singleField) {
        var tags = this.assignedTags();
        tags.push(value);
        this._updateSingleTagsField(tags);
    } else {
        var escapedValue = value;
        tag.append('<input type="hidden" style="display:none;" value="' + escapedValue + '" name="' + this.options.itemName + '[' + this.options.fieldName + '][]" />');
    }

最后我将标签名添加到自动完成并关注

        // Autocomplete.
        if (this.options.availableTags || this.options.tagSource) {
            this._tagInput.autocomplete({
                source: this.options.tagSource,
                select: function(event, ui) {
                    // Delete the last tag if we autocomplete something despite the input being empty
                    // This happens because the input's blur event causes the tag to be created when
                    // the user clicks an autocomplete item.
                    // The only artifact of this is that while the user holds down the mouse button
                    // on the selected autocomplete item, a tag is shown with the pre-autocompleted text,
                    // and is changed to the autocompleted text upon mouseup.
                    if (that._tagInput.val() === '') {
                        that.removeTag(that._lastTag(), false);
                    }
                    that.createTag(ui.item.label,ui.item.value);
                    // Preventing the tag input to be updated with the chosen value.
                    return false;
                },
            focus: function(event, ui) {
                event.preventDefault();
                that.createTag(ui.item.label,ui.item.value);
            }
            });

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

以焦点更新（由@Edwin启发）

Answer 2

最简单的方法是获得实际支持此功能的插件。那就是Select2或Chosen。

Answer 3

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

that.createTag(ui.item.value);

到

that.createTag(ui.item.label);

这是我的编辑器第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;
                    }
                });
            }

Answer 4

在tag-it.js文件中，他评论了//自动完成，添加一个事件选项焦点，如下所示。这应该解决它。

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

            };

Answer 5

这是另一种解决方法（假设您要使用data-id属性）：

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

随附HTML：

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

Answer 6

覆盖focus事件以处理标签和值并不简单。我的解决方案包括使用close使用ui.item事件中最后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) {
            ...
        }
        ...
    }
    ...
});

Answer 7

您好我刚刚使用PHP完成了我的项目。

我在某些时候修改过插件，所以请使用jsfiddle脚本部分的脚本。

看看我已经制作了完整的工作键值对脚本https://jsfiddle.net/656pnLsd/

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

以焦点更新（由@Edwin和Marco Johannesen启发）

jQuery Tag-It - 使用值和标签对象列表

7 个答案: