JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js/external/knockout-latest.js"></script>
<script src="https://igniteui.com/js/external/knockout.mapping-latest.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.combo.knockout-extensions.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<h2 class="title">My Favourite Actors</h2>
<div class="horizontal-container">
<label>Selected Actor:</label>
<a data-bind="attr: { href: imdb_url, title: actorName_imdb }, text: selectedActorName" href="#" target="_blank"></a>
</div>
<div class="horizontal-container">
<input data-bind="value: newActor" type="text" class="input-add-actor"></input>
<input data-bind="click: addActor" type="button" value="Add"></input>
</div>
<div class="horizontal-container">
<span id="comboActors" data-bind="igCombo: {
dataSource: actors,
textKey: 'name',
valueKey: 'id',
selectedItems: selectedActor,
width: '200',
mode: 'dropdown',
enableClearButton: false
}"></span>
<input data-bind="click: removeActor" type="button" value="Remove"></input>
</div>
<div class="horizontal-container">
<select id="listboxActors" data-bind="options: actors, selectedOptions:...
CSS
label { display: inline-block; }
.title {margin-left: 10px;}
.horizontal-container { padding: 10px; margin-left:10px;}
.horizontal-container .input-add-actor { width: 196px; height: 22px; border-radius: 4px; border: 1px solid #4F4F4F; font-size: 17px; }
.horizontal-container input[type=button] { margin-left: 20px; font-size: 14px; vertical-align: top; }
.horizontal-container select { border-radius: 4px; border: 1px solid #4F4F4F; width: 200px; }
JavaScript
$(function () {
// http://www.imdb.com/find?q=Ivan+Ivanov&s=nm
var model = [
{ name: "Adam Sandler", id: "nm0001191" },
{ name: "Brooke Shields", id: "nm0000222" },
{ name: "Charles Chaplin", id: "nm0000122" },
{ name: "Charlize Theron", id: "nm0000234" },
{ name: "Dustin Hoffman", id: "nm0000163" },
{ name: "Hristo Shopov", id: "nm0794885" },
{ name: "Jeremy Irons", id: "nm0000460" },
{ name: "Noomi Rapace", id: "nm0636426" },
{ name: "Nicole Kidman ", id: "nm0000173" },
{ name: "Robert De Niro", id: "nm0000134" },
{ name: "Tom Cruise", id: "nm0000129" },
{ name: "Tom Hanks", id: "nm0000158" }
];
var viewModel = new ViewModel(model);
function ViewModel(actorsList) {
var self = this;
this.actorsList = actorsList;
// The array of actor objects and a computed array of actor names
// for the plain SELECT which cannot work with objects
this.actors = ko.observableArray(self.actorsList);
// The name of the currently selected actor.
this.selectedActor = ko.observableArray([self.actors()[0].id]);
this.index = ko.observable(0);
this.selectedActorName = ko.computed(function () {
var id = self.selectedActor()[0]
for (i = 0; i < self.actorsList.length; i++) {
if (self.actorsList[i].id === id) {
return self.actorsList[i].name;
}
}
});
// Members that facilicate actor list manipulations
this.newActor = ko.observable("");
this.addActor = function () {
var newActObj;
if (self.newActor() !== "" && !self.findActorRecord(self.newActor())) {
newActObj = {
id: "new"...