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

刚试过优秀的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" }); 

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

因此，可以在隐藏字段中输入“值”，并将“标签”显示为标记名称？

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

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

谢谢，Seb

Answer 1

尝试玩弄它，请参阅： http ： //jsfiddle.net/pDrzx/46/

我做了什么：

使用labelname扩展createTag函数

  createTag: function(labelname, value, additionalClass) 

并在标签创建var上调用它

 var label = $(this.options.onTagClicked ? '' : '').text(labelname); 

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

  if (this.options.singleField) { var tags = this.assignedTags(); tags.push(value); this._updateSingleTagsField(tags); } else { var escapedValue = value; tag.append(''); } 

最后，我将标签名添加到自动完成和焦点

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

最简单的方法是获得实际支持此function的插件。 那就是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文件中，他使用//自动完成function进行评论，添加一个事件选项焦点，如下所示。 这应该解决它。

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

 
 
Item A
 
Item B
  

Answer 6

覆盖focus事件以处理标签和值并不简单。 我的解决方案包括利用close来创建标记，使用focus事件中最后一个ui.item的保存引用：

 $$("#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/

 
 
test2
 
  

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