examples/multiSelect/multiSelectBasic.html
<!DOCTYPE html>
<html>
<head>
<title>Multi Select Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src='../../dist/ui.js'></script>
</head>
<body>
<div class='categories'></div>
<script>
var categories = new UI.MultiSelect('.categories', {
options: [
{
displayName: 'Marketing',
value: 'mrkt01',
count: 5
},
{
displayName: 'Sales',
value: 'sales',
count: 9
},
{
displayName: 'Engineering',
value: 'eng-2015',
count: 43
},
{
displayName: "It's an apostrophe test",
value: "It's an apostrophe test",
count: 200
},
{
displayName: '"Quote test"',
value: '"Quote test"',
count: 200
}
],
renderItem: function (item) {
return item.displayName + ' (' + item.count + ')';
}
});
categories.subscribe(function (choice) {
console.log('New Category kiiii!', choice);
categories.render();
});
categories.render();
</script>
</body>
</html>