JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Used to style the API Viewer and Explorer UI -->
<link href="http://www.igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js"></script>
<script src="http://www.igniteui.com/js/apiviewer.js"></script>
<table>
<tr><td>With multiple selection</td><td><div id="combo"></div></td></tr>
<tr><td>With multiple selection</td><td><div id="combo2"></div></td></tr>
</table>
<br/><br/><br/>
<div class="api-viewer"></div>
JavaScript
$(function () {
// Used to show output in the API Viewer at runtime,
// defined in external script 'apiviewer.js'
var apiViewer = new $.ig.apiViewer();
var data = [
{ "ID":1, "Name": "John Smith", "Age": 45 },
{ "ID":2, "Name": "Mary Johnson", "Age": 32 },
{ "ID":3, "Name": "Bob Ferguson", "Age": 27 }
];
$("#combo").igCombo({
dataSource: data, //JSON Array defined above
valueKey: "ID",
textKey: "Name",
nullText: "Please Select",
noMatchFoundText: "No Match Found!",
selectionChanged: function (evt, ui) {
apiViewer.log("Selection changed fired!");
}
});
$('#combo2').igCombo({
dataSource: data,
textKey: 'Name',
valueKey: 'ID',
dropDownAttachedToBody: false,
multiSelection: {
enabled: true
},
selectionChanged: function (sender, eventArgs){
apiViewer.log("Selection changed fired!");
}
});
});