Question

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

我的标签输入＆amp; 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(' ');

＆＃39; + htmlEncode（itemValue）+＆＃34;：＆＃34; + htmlEncode（itemText）+＆＃39; 是在标签上显示文字的部分，在这种情况下它显示：＆＃34;值：文字＆＃34;。

tagsinput-typeahead value as tag

1 个答案: