JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://s3.amazonaws.com/cdn.generalsentiment.com/resources/test/select2-3.4.0/select2.min.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/cdn.generalsentiment.com/resources/test/select2-3.4.0/select2.css">
<input id="audience-category-selector"
type="text"
class="span3 selector-input-class"
disabled="disabled"/>
JavaScript
var input = $("#audience-category-selector");
var options = [{"id":"General Interest","text":"General Interest <span class='muted'>(1)</span>"},{"id":"Brand","text":"Brand <span class='muted'>(505)</span>"},{"id":"Politics","text":"Politics <span class='muted'>(6)</span>"},{"id":"Network","text":"Network <span class='muted'>(30)</span>"},{"id":"Movie","text":"Movie <span class='muted'>(10)</span>"},{"id":"Custom","text":"Custom <span class='muted'>(196)</span>"},{"id":"Japanese TV Show","text":"Japanese TV Show <span class='muted'>(29)</span>"},{"id":"brands3","text":"brands3 <span class='muted'>(1)</span>"},{"id":"Miscellaneous","text":"Miscellaneous <span class='muted'>(7)</span>"}];
input
.prop("disabled", false)
.select2({
data: {
results: options,
text: "text"
},
multiple: true,
placeholder: "Select audience categories",
formatSelection: function(item) {
return item.text;
},
escapeMarkup: function(m) { return m; }
});