JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://andersmalmgren.github.io/Knockout.Combobox/src/knockout.combobox.js"></script>
<link rel="stylesheet" href="http://andersmalmgren.github.io/Knockout.Combobox/demo.css">
<section>
<div class="combobox clearfix" data-bind="combobox: { dataSource: getData, placeholder: 'Select item' }, comboboxValue: selected"></div>
<div>Selected: <span data-bind="text: selectedName"></span></div>
</section>
<section>
<h3>Custom item template</h3>
<div class="combobox clearfix" data-bind="combobox: { dataSource: getData, rowTemplate: 'row-template' }, comboboxValue: selected"></div>
<div>Selected: <span data-bind="text: selectedName"></span></div>
</section>
<script id="row-template" type="text/html">
<span data-bind="text: name"></span><span>Custom template stuff</span>
</script>
JavaScript
ViewModel = function () {
this.selected = ko.observable();
this.selectedName = ko.computed(function () {
return this.selected() != null ? this.selected().name : "";
}, this);
}
ViewModel.prototype = {
getData: function (options) {
if (options.page == 0) {
options.total = Math.floor((Math.random() * 200) + 1);
}
var data = [];
for (var i = 0; i < Math.min(options.pageSize, options.total); i++) {
var index = (i + (options.page * options.pageSize));
if (index == options.total) { break; }
data.push({ name: options.text + " " + index });
}
//Simulate async
var delay = Math.floor((Math.random() * 100) + 10); ;
setTimeout(function () {
options.callback({ data: data, total: options.total });
}, delay);
}
};
ko.applyBindings(new ViewModel());