筛选可观察的数组时不存在数据

Question

I'm trying to get a search box to work with an observable array. I want to have the user enter in text and have the values displayed match by either first name or last name.

HTML and JavaScript below.

Every time I try to use the computed function I get nothing displayed. If I just use the employee array I get the data that's in the DB. I'm sure it's something small but I'm at a loss.

 var ViewModel = function () { var self = this; self.employees = ko.observableArray(); self.interests = ko.observableArray(); self.error = ko.observable(); self.detail = ko.observable(); self.newEmployee = { LastName: ko.observable(), FirstName: ko.observable(), StreetAddress: ko.observable(), State: ko.observable(), Zip: ko.observable(), Age: ko.observable(), Image: ko.observable() } var employeeUri = '/api/employees/'; var interestsUri = '/api/interests/'; function getInterests() { ajaxHelper(interestsUri, 'GET') .done(function(data) { self.interests(data); }); } self.addEmployee = function(formElement) { var employee = { FirstName: self.newEmployee.FirstName, LastName: self.newEmployee.LastName, StreetAddress: self.newEmployee.StreetAddress, State: self.newEmployee.State, Zip: self.newEmployee.Zip, Age: self.newEmployee.Age, Image: self.newEmployee.Image }; ajaxHelper(employeeUri, 'POST', employee) .done(function(item) { self.employees.push(item); }); } getInterests(); function ajaxHelper(uri, method, data) { self.error(''); // Clear error message return $.ajax({ type: method, url: uri, dataType: 'json', contentType: 'application/json', data: data ? JSON.stringify(data) : null }).fail(function (jqXhr, textStatus, errorThrown) { self.error(errorThrown); }); } function getAllEmployees() { ajaxHelper(employeeUri, 'GET').done(function (data) { self.employees(data); }); } self.getEmployeeDetail = function(item) { ajaxHelper(employeeUri + item.Id, 'GET') .done(function(data) { self.detail(data); }); } // Fetch the initial data. getAllEmployees(); self.filteredPeople = ko.computed(function () { var filter = self.filter().toLowerCase(); if (!filter) { return this.employees(); } else { return ko.utils.arrayFilter(this.employees(), function (item) { return ko.utils.stringStartsWith(item.FirstName().toLowerCase(), filter) || ko.utils.stringStartsWith(item.LastName().toLowerCase(), filter); }); } }); }; ko.applyBindings(new ViewModel()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> @section scripts { @Scripts.Render("~/bundles/app") } <div class="page-header"> <h1>People Finder</h1> </div> <div class="row"> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">People Search Application</h2> </div> <div class="panel-body"> <input type="text" class="form-control" data-bind="value: filter valueUpdate: 'keyup'" placeholder="Search" aria-describedby="basic-addon1"> <ul class="list-unstyled" data-bind="foreach: filteredPeople"> <li> <table class="table"> <tr> <th>Name</th> <th>Details</th> </tr> <tr> <td><span data-bind="text: LastName"></span>, <span data-bind="text: FirstName"></span></td> <td><a href="#" data-bind="click: $parent.getEmployeeDetail">Details</a></td> </tr> </table> </li> </ul> </div> </div> <div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div> </div> <!-- ko if:detail() --> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">Detail</h2> </div> <table class="table table-hover" style="text-align: left"> <tr><td>Name</td><td><span data-bind="text: detail().LastName"></span>, <span data-bind="text: detail().FirstName"></span></td></tr> <tr><td>Address</td><td data-bind="text: detail().StreetAddress"></td></tr> <tr><td>State</td><td data-bind="text: detail().State"></td></tr> <tr><td>Zip</td><td data-bind="text: detail().Zip"></td></tr> <tr><td>Age</td><td data-bind="text: detail().Age"></td></tr> <tr> <td>Image</td> <td> <img data-bind="text: detail().Image" alt="Profile Picture" /> </td> </tr> </table> </div> </div> <!-- /ko --> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">Add Person</h2> </div> <div class="panel-body"> <form class="form-horizontal" data-bind="submit: addEmployee" enctype="multipart/form-data"> <div class="form-group" data-bind="with: newEmployee"> <label for="inputFirstName" class="col-sm-2 control-label">First</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputFirstName" data-bind="value:FirstName" /> </div> <label for="inputLastName" class="col-sm-2 control-label">Last</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputLastName" data-bind="value:LastName" /> </div> <label for="inputAddress" class="col-sm-2 control-label">Address</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputAddress" data-bind="value:StreetAddress" /> </div> <label for="inputState" class="col-sm-2 control-label">State</label> <div class="col-sm-10"> <select class="form-control" id="inputState" data-bind="value:State"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District Of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> </div> <label for="inputZip" class="col-sm-2 control-label">Zip</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputZip" data-bind="value:Zip" /> </div> <label for="inputImage" class="col-sm-2 control-label">Image</label> <div class="col-sm-10"> <input type="file" class="form-control" id="inputImage" data-bind="value:Image" /> </div> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div> </div> 

Thank you.

Answer 1

so as mentioned in the comments think you are missing the self.filter. also if you are using the minified ko file you may not have the ko.utils.stringStartsWith. so here is a search by name that I did. hopefully it is helpful

here is the fiddle http://jsfiddle.net/bdellinger/LkqTU/32347/

here is the javascript.

function employee(firstName, lastName, address, state, zip, age) {
  var self = this;
  this.firstName = ko.observable(firstName);
  this.lastName = ko.observable(lastName);
  this.address = ko.observable(address);
  this.state = ko.observable(state);
  this.zip = ko.observable(zip);
  this.age = ko.observable(age);
}

function model() {
  var self = this;
  this.employees = ko.observableArray('');
  this.filter = ko.observable('');

  this.filteredItems = ko.computed(function() {
    var filter = this.filter().toLowerCase();
    if (!filter) {
      return this.employees();
    } else {
      return ko.utils.arrayFilter(this.employees(), function(item) {
        if (
          item.firstName().toLowerCase().startsWith(filter) ||
          item.lastName().toLowerCase().startsWith(filter)
        ) {
          return item;
        }
      });
    }
  }, this);

}

String.prototype.startsWith = function(prefix) {
  return this.indexOf(prefix) === 0;
};

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
  mymodel.employees.push(new employee('John', 'Smith', '13 Pine Way', 'GA', '34876', '32'));
  mymodel.employees.push(new employee('Fred', 'Thebes', '6 Paine Hollow Dr', 'MA', '74846', '28'));
  mymodel.employees.push(new employee('Mary', 'Jones', '45 Way St', 'PA', '34986', '48'));
  mymodel.employees.push(new employee('Sue', 'Rodgers', '8 Mission Lane', 'TX', '14874', '55'));
});

here is the html

<form class="form-inline">
  <div class="form-group">
    <label for="filter">Search By Name:</label>
    <input type="text" class="form-control" id="filter" data-bind="textInput: filter">
  </div>
</form>

<table class="table table-striped">
  <thead>
    <tr>
      <th>First</th>
      <th>Last</th>
      <th>Address</th>
      <th>State</th>
      <th>Zip</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: filteredItems">
    <tr>
      <td>
        <label data-bind="text:firstName"></label>
      </td>
      <td>
        <label data-bind="text:lastName"></label>
      </td>
      <td>
        <label data-bind="text:address"></label>
      </td>
      <td>
        <label data-bind="text:state"></label>
      </td>
      <td>
        <label data-bind="text:zip"></label>
      </td>
      <td>
        <label data-bind="text:age"></label>
      </td>
    </tr>
  </tbody>
</table>

<div>