JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<div class='liveExample'> 
    
<form data-bind="submit: addItem">
    New item:
    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
        Search items:
    <input data-bind='value: search, valueUpdate: "afterkeydown"' />
    <p>Your items:</p>
    <select multiple="multiple" width="50" data-bind="options: filteredItems"> </select>
</form>
    
</div>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

JavaScript

var SimpleListModel = function(items) {
    
    var self = this;
    
    self.items = ko.observableArray(items);
    self.itemToAdd = ko.observable("");
    self.search = ko.observable('');
    
    self.filteredItems = ko.computed(function() {
    var filter = self.search().toLowerCase();
    if (!filter) {
        return self.items();
    } else {
        return ko.utils.arrayFilter(self.items(), function(item) {
            console.log(item.toLowerCase().indexOf(filter));
            return item.toLowerCase().indexOf(filter) != -1;
        });
    }
}, self);                     
                          
    self.addItem = function() {
        if (self.itemToAdd() != "") {
            self.items.push(self.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
            self.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
        }
    }
};
 
ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));