JSFiddle - React, Tailwind, and code Playground

by jlspake

HTML

<input type="text" class="radius" placeholder="SerialNo" data-bind="textInput: fromSerialNo" />
<br/>
<select data-bind="options: filteredInventoryList,
                   optionsText: function(item) {
                     return item.Id + ' (' + item.SerialNo + ')';
                   },
                   selectedOptions: selectedEquipment                   
                   " size="5" multiple="multiple" style="width: 300px;"></select>

<br/>
<span data-bind="text: ko.toJSON(selectedEquipment)"></span>
<br/>
<span data-bind="text: ko.toJSON(fromInventoryList)"></span>

JavaScript

var inventory = [{
      Id: "1",
      SerialNo: "00001"
    },
    {
      Id: "2",
      SerialNo: "00002"
    },
    {
      Id: "3",
      SerialNo: "10003"
    },
    {
      Id: "4",
      SerialNo: "10004"
    }
  ];

function viewModel() {
  var _root = this;
  _root.fromSerialNo = ko.observable();
  _root.selectedEquipment = ko.observableArray();
  _root.fromInventoryList = ko.observableArray(inventory);
  
  _root.filteredInventoryList = ko.computed(function() {
      var filteredList = ko.observableArray(null);
      
      if (!_root.fromSerialNo()) {
      	return _root.fromInventoryList();
      }
      else {
        // Default the list to include the selected items.
        ko.utils.arrayPushAll(filteredList, _root.selectedEquipment());
        // Add items that begin with the SerialNo entered
        filteredList().push.apply(filteredList(), ko.utils.arrayFilter(_root.fromInventoryList(), function (item) {
                    return item.SerialNo.startsWith(_root.fromSerialNo());
                }));
       
        return filteredList();
      }
  });
}

ko.applyBindings(new viewModel());