tagsinput-typeahead 值作为标签

Question

我正在使用 Bootstrap 3.3.6、JQuery 1.11.0、Bootstrap3-typeahead 4.0.2 和 bootstrap-tagsinput 0.8.0。

我的 tagsinput 和 typeahead 工作正常，但是如何让标签显示值而不是从 typeahead 中选择的文本？

值 = 项目编号

文本 = 项目编号 + 项目名称

这是我的代码：

    $('#jobno').tagsinput({
          confirmKeys: [13],
          itemValue: 'value',
          itemText: 'text',
          typeahead: {
               displayKey: 'text',
               afterSelect: function(val) { this.$element.val(""); },
               minLength:3,
               source: [{"value":"2006.01","text":"2006.01 - Project 1"},{"value":"2006.02","text":"2006.02 - Project 2"},{"value":"2006.03","text":"2006.03 - Project 3"}]
          }
    });

<div class="form-group">
    <label class="control-label col-md-3">Job Number(s) </label>
    <div class="col-md-8">
        <!-- <input type="text" class="form-control tagsinput-typeahead" name="jobno" id="jobno"  > -->
        <select multiple="multiple" class="form-control tagsinput-typeahead" name="jobno" id="jobno" ></select>
    </div>
</div>

这些选项都不是我想要的：

itemValue: 'value',
itemText: 'value',

itemValue: 'text',
itemText: 'text',

还有第三种选择吗？

Screen Shot

Answer 1

只需打开您的 bootstrap-tagsinput.js 并在以下位置更改您的自定义值：

  // add a tag element

  var $tag = $('<span class="tag ' + htmlEncode(tagClass) + (itemTitle !== null ? ('" title="' + itemTitle) : '') + '">'+htmlEncode(itemValue) +": " + htmlEncode(itemText) + '<span data-role="remove"></span></span>');
  $tag.data('item', item);
  self.findInputWrapper().before($tag);
  $tag.after(' ');

'+htmlEncode(itemValue) +": " + htmlEncode(itemText) + ' 是在标签上显示文本的部分，在这种情况下它显示：“value: text”。