Markup
<input type="text" class="tags tags-input" data-type="tags" value="foo,bar,baz,roffle"/>
JS
/**
* Dependent Files
* jquery.tagsinput.js
* tagsinput.css
* */
// Initialize Code
if ($.fn.tagsInput) {
$('.tags-input').each(function() {
var tagsType = $(this).data('type')
var highlightColor = $(this).data('highlight-color')
if (tagsType === 'tags') {
$(this).tagsInput({
width: 'auto'
});
}
if (tagsType === 'highlighted-tags') {
$(this).tagsInput({
width: 'auto',
onChange: function(elem, elem_tags) {
var languages = ['php', 'ruby', 'javascript'];
$('.tag', elem_tags).each(function() {
if ($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0) $(this).css('background-color', highlightColor);
});
}
});
}
});
}