JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<select id="testThings2" name="skills" multiple="" class="ui fluid search dropdown">
<option value="">During Init</option>
<option value="1">Angular</option>
<option value="2">CSS</option>
<option value="3">Graphic Design</option>
<option value="4">Ember</option>
<option value="5">HTML</option>
<option value="6">Information Architecture</option>
<option value="7">Javascript</option>
<option value="8">Mechanical Engineering</option>
<option value="9">Meteor</option>
<option value="10">NodeJS</option>
<option value="11">Plumbing</option>
<option value="12">Python</option>
<option value="13">Rails</option>
<option value="14">React</option>
<option value="15">Kitchen Repair</option>
<option value="16">Ruby</option>
<option value="17">UI Design</option>
<option value="18">User Experience</option>
</select>
CSS
body {
padding: 1em;
}
JavaScript
// Add javascript here
$("#testThings2").dropdown({
allowAdditions : true,
hideAdditions : false,
maxSelections : 1,
message: {
addResult : 'Agregar: <b>{term}</b>',
},
action: function(text, value) {
if (text != value) {
$('#testThings2').dropdown('set selected', value);
} else {
alert("Nuevo registro: " + text);
}
}
});