JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap-2.3.2/js/bootstrap.min.js"></script>
<script src="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.js"></script>
<body>
<br />
<input type="text" />
<br />
</body>
JavaScript
$('input').tagsinput({
itemValue: 'Id',
itemText: 'Ch_Name',
typeahead: {
source: function (query, process) {
cities = [];
map = {};
var data = [{
"value": 1,
"text": "Amsterdam"
}, {
"value": 4,
"text": "Washington"
}, {
"value": 7,
"text": "Sydney"
}, {
"value": 10,
"text": "Beijing"
}, {
"value": 13,
"text": "Cairo"
}];
$.each(data, function (i, city) {
map[city.text] = city;
cities.push(city.text);
});
return (cities);
}
}
});