Knockout filter function

knockout filter logic

by Salmin Skenderovic

HTML

<p data-bind="text: name"></p>

<h3>5- Filter display by name</h3>
<p>Filter:
  <input data-bind="value: filter, valueUpdate: 'afterkeydown'" />
</p>

<p></p>
<div class="row">
  <div class="col-lg-12" data-bind="foreach: filteredItems">
    <div class="radio">
      <label>
        <input type="radio" name="optionsGroup" data-bind="click: $root.setSelectedAddress">
        <span data-bind="text: $root.formatedFiltered($data)().before"></span><span class="filtered" data-bind="text: $root.formatedFiltered($data)().filtered"></span><span data-bind="text: $root.formatedFiltered($data)().after"></span>
      </label>
    </div>
  </div>
</div>


<!-- ko if: selectedStreetAddress() -->
<p data-bind="text: selectedStreetAddress().Number"></p>
<!-- /ko -->

CSS

.filtered {
  text-decoration: underline;
}

span {
  font-size: 24px;
}

JavaScript

function Address(street, nr, city) {
  this.ServiceIdentifier = null;
  this.StreetAddress = street;
  this.Number = nr;
  this.ZipCode = null;
  this.CityName = city;
  this.StreetNumberSuffix = null;
  this.FloorNumber = null;
  this.searchField = ko.observable(street + ' ' + nr + ' ' + city)
}

function ViewModel() {

  self = this;
  self.name = ko.observable("Testar");
  self.filter = ko.observable("");

  self.formatedFiltered = function(addr) {

    var obj = {};
    var str = obj.before = obj.filtered = obj.after = "";

    str += addr.StreetAddress;
    str += ' ';
    str += addr.Number;
    str += ', ';
    str += addr.CityName;


    if (self.filter().length > 0) {
      var f = self.filter().toLowerCase();
      var fstart = str.toLowerCase().indexOf(f);
      var fend = fstart + f.length;
			
			obj.before = str.substr(0, fstart);
      obj.filtered = str.substr(fstart, f.length);
      obj.after = str.substr(fstart + f.length, str.length);
      
    } else {
      obj.before = str;
    }


    return ko.computed(function() {
      return obj;
    })
  }


  self.selectedStreetAddress = ko.observable();

  self.addresses = ko.observableArray([
    new Address("MinGata", "32", "Helsingborg"),
    new Address("Testgata", "19", "Ängelholm"),
    new Address("Hittepåvägen", "14", "Ängelholm"),
    new Address("Lantgatan", "19", "Ängelholm")
  ]);

  self.setSelectedAddress = function(data) {
    self.selectedStreetAddress(data);
    return true;
  }

  self.filteredItems = ko.dependentObservable(function() {
    var filter = self.filter().toLowerCase();
    if (!filter) {
      return self.addresses();
    } else {
      return ko.utils.arrayFilter(self.addresses(), function(item) {
        return item.searchField().toLowerCase().indexOf(filter) !== -1;
      });
    }
  });

}



ko.applyBindings(new ViewModel());