CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-typeaheadbootstrap-tags-input
Barry Ralphs
Barry Ralphs

Reputation: 295

tagsinput-typeahead value as tag

I am using Bootstrap 3.3.6, JQuery 1.11.0, Bootstrap3-typeahead 4.0.2, and bootstrap-tagsinput 0.8.0.

My tagsinput & typeahead is working fine, but how can I have the tags show the value instead of the text that's chosen from the typeahead?

Value = Project number

Text = Project number + Project Name

Here's my code:

    $('#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>

Neither of these options is what I want:

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

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

Is there a third option?

Screen Shot

Upvotes: 1

Views: 1237

Answers (1)

Tobias S
Tobias S

Reputation: 21

just open your bootstrap-tagsinput.js and change your custom values at : 

  // 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) + ' is the part which shows the text on the tag, in this case it shows: "value: text".

Upvotes: 2

Related Questions