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">
<script src="https://www.google.com/jsapi"></script>
<section>
<div id="branding"></div>
<div class="combobox clearfix" data-bind="combobox: { dataSource: getData, placeholder: 'Select image', rowTemplate: 'row-template', pageSize: pageSize, valueMember: 'titleNoFormatting' }, comboboxValue: selectedImage"></div>
<div data-bind="with: selectedImage">
<image data-bind="attr: { src: url }" />
<div data-bind="html: content"></div>
</div>
</section>
<script id="row-template" type="text/html">
<img data-bind="attr: { src: tbUrl, title: titleNoFormatting }"></img>
<div data-bind="html: title"></div>
</script>
JavaScript
ViewModel = function() {
this.selectedImage = ko.observable();
this.imageSearch = new google.search.ImageSearch();
this.pageSize = 8;
this.imageSearch.setResultSetSize(this.pageSize);
google.search.Search.getBranding("branding");
};
ViewModel.prototype = {
getData: function(options) {
if(options.text == "") return;
var callback = function(search) {
var cursor = this.imageSearch.cursor;
options.callback({ data: search.results, total: parseFloat(cursor.estimatedResultCount ) });
};
if(options.page !== 0) {
this.imageSearch.gotoPage(options.page)
} else {
this.imageSearch.setSearchCompleteCallback(window, callback.bind(this) , [this.imageSearch]);
this.imageSearch.execute(options.text);
}
}
};
google.load('search', '1');
google.setOnLoadCallback(function() { ko.applyBindings(new ViewModel()); });