search/filterII w/details

by amitava82

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<div>
  <div id="header">
      Filter: <input data-bind="value: searchTerm, valueUpdate: 'afterkeydown'" /><span>(please use all lower case)</span><br />
      <button data-bind="click:reset">Clear Filter</button>
  </div>
  <div id="container">
    <div id="list">
      <h3>List with Hyperlinks</h3>   
      <ul data-bind="foreach: filteredItems">
        <li> 
          <a href="#" data-bind="click: $root.selectedItem">
            <span data-bind="text: FirstName"></span> <span data-bind="text: LastName"></span>
          </a>
        </li>
      </ul>  
    </div>
    <div id="details">
      <h3>Details</h3>  
      <div data-bind="with: selectedItem">
            <span data-bind="text: FirstName"></span> <span data-bind="text: LastName"></span><br />
            <span data-bind="text: Address"></span><br />
            <span data-bind="text: City"></span> <span data-bind="text: State"></span> <span data-bind="text: Zip"></span><br />
            <a href="#" data-bind="click: function () { $root.setDept(DeptID()) } ">
              <span data-bind="text: DeptID"></span>
            </a>
      </div>  
    </div>
  </div>
</div>

CSS

h3 {font-family: arial, san-serif; font-weight: bold;} 
body {font-family: arial, san-serif; font-size: 15px; padding: 10px 30px 10px 10px;} 
#header {
    width: 100%;
    height: 40px;
    background-color:#F9EBD1;
    padding: 10px;
}    
#container {
    width: 100%;
    height: 160px;
    background-color:#625948;
    padding: 10px;
}    
#list {
    width: 50%;
    height: 100%;
    float: left;
    font-family: arial, san-serif;
    font-size: 15px;                
    padding: 10px -10px -10px 10px;
    background-color:#F5DEB3;
}
#details {
    width: 50%;
    height: 100%;
    float: left;
    font-family: arial, san-serif; 
    padding: 10px -10px -10px 10px;
    background-color:#DCC8A1;
}

JavaScript

function Item(ID, FirstName, LastName, Address, City, State, Zip, DeptID, selectedItem) {
    return {
        ID: ko.observable(ID),
        FirstName: ko.observable(FirstName),
        LastName: ko.observable(LastName),
        Address: ko.observable(Address),
        City: ko.observable(City),
        State: ko.observable(State),
        Zip: ko.observable(Zip),
        DeptID: ko.observable(DeptID),

        select: function() {
            selectedItem(this);
        }
    };
}

var viewModel = {

    searchTerm: ko.observable(),
    searchDept: ko.observable(),
    selectedItem: ko.observable(),

    items: ko.observableArray([
        new Item(1, "Bill", "Brown", "510 Main St.", "South Bend", "IN", "45432", "5001"),
        new Item(2, "Bob", "Bailey", "511 Church St.", "South Bend", "IN", "45432", "5001"),
        new Item(3, "Betty", "Butler", "512 High St.", "South Bend", "IN", "45432", "5001"),
        new Item(4, "Bart", "Barnes", "513 Elm St.", "South Bend", "IN", "45432", "5002"),
        new Item(5, "Betsy", "Burke", "514 Chestnut St.", "South Bend", "IN", "45432", "5002"),
        new Item(6, "Barb", "Brewer", "515 Walnut St.", "South Bend", "IN", "45432", "5002")
        ]),
    
    setDept: function(data) {
        this.searchDept(data)
    },
    
    reset: function(data) {
        this.searchDept(data)
    }

};

viewModel.filteredItems = ko.computed(function() {
    var term = this.searchTerm();
    var dept = this.searchDept();

    if (dept > 1) {
        return dept ? ko.utils.arrayFilter(this.items(), function(item) {
            return item.DeptID().indexOf(dept) > -1
        }) : this.items;
    } else {
        return term ? ko.utils.arrayFilter(this.items(), function(item) {
            return item.FirstName().toLowerCase().indexOf(term) > -1 || item.LastName().toLowerCase().indexOf(term) > -1
        }) : this.items;
    }

}, viewModel);

ko.applyBindings(viewModel);