I'm very new to Knockout JS and I'm having a hell of a time trying to get this project pleted.

I've created a map website which displays a series of pins on the page for popular locations around town. The idea is that the search bar to the left of the page will filter out pins on the map with names that do not match the search query. There is also a "master" list on the left of the page that the search bar will filter from too.

I used an example I found on jsfiddle here: / but I'm having troubles applying that same logic to my code.

Here it is:

HTML:

        <li>
            <input class="form-control" placeholder="Search…" type="search" name="filter" data-bind="value: query, valueUpdate: 'keyup'" autoplete="off">
        </li>
        <ul data-bind="template: {name:'pin', foreach: pins}"></ul> 
    </ul>

<script type="text/html" id="pin">
    <li>
        <strong data-bind="text: name"></strong>
    </li>
</script>

JS:

self.pins = ko.observableArray([
  new self.mapPin("Anchorage Alaska", 61.190491, -149.868937, "test1"),
  new self.mapPin("Anchorage Alaska", 61.190491, -149.868937, "test2")
]);

self.query = ko.observable('');

self.filterPins = ko.dependentObservable(function () {
    var search = self.query().toLowerCase();
    return ko.utils.arrayFilter(name, function (pin) {
        return pin.toLowerCase().indexOf(search) >= 0;
    });
});

With the logic I've setup if the name is removed from the pin constructor it will remove it from the map.

Here is my somewhat working example: /

I'm very new to Knockout JS and I'm having a hell of a time trying to get this project pleted.

I've created a map website which displays a series of pins on the page for popular locations around town. The idea is that the search bar to the left of the page will filter out pins on the map with names that do not match the search query. There is also a "master" list on the left of the page that the search bar will filter from too.

I used an example I found on jsfiddle here: http://jsfiddle/mythical/XJEzc/ but I'm having troubles applying that same logic to my code.

Here it is:

HTML:

        <li>
            <input class="form-control" placeholder="Search…" type="search" name="filter" data-bind="value: query, valueUpdate: 'keyup'" autoplete="off">
        </li>
        <ul data-bind="template: {name:'pin', foreach: pins}"></ul> 
    </ul>

<script type="text/html" id="pin">
    <li>
        <strong data-bind="text: name"></strong>
    </li>
</script>

JS:

self.pins = ko.observableArray([
  new self.mapPin("Anchorage Alaska", 61.190491, -149.868937, "test1"),
  new self.mapPin("Anchorage Alaska", 61.190491, -149.868937, "test2")
]);

self.query = ko.observable('');

self.filterPins = ko.dependentObservable(function () {
    var search = self.query().toLowerCase();
    return ko.utils.arrayFilter(name, function (pin) {
        return pin.toLowerCase().indexOf(search) >= 0;
    });
});

With the logic I've setup if the name is removed from the pin constructor it will remove it from the map.

Here is my somewhat working example: http://jamesiv.es/projects/map/

• javascript
• jquery
• html
• knockout.js

Share Improve this question Follow edited Apr 10, 2015 at 2:39 hufflapuff asked Apr 10, 2015 at 1:43 hufflapuffhufflapuff 22533 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

HTML

<ul data-bind="template: {name:'pin', foreach: pins}"></ul> 

change to

<ul data-bind="template: {name:'pin', foreach: filterPins}"></ul> 

Javascript

self.filterPins = ko.dependentObservable(function () {
    var search = self.query().toLowerCase();
    return ko.utils.arrayFilter(self.name, function (pin) {
        return pin.toLowerCase().indexOf(search) >= 0;
    });
});

change to

self.filterPins = ko.puted(function () {
    var search = this.query().toLowerCase();
    return ko.utils.arrayFilter(self.pins(), function (pin) {
        return pin.name().toLowerCase().indexOf(search) >= 0;
    });
});

Just want to update the code if using Knockout version newer than 3.2

Change from value and valueUpdate to textInput, as recended here

HTML:

<input class="form-control" placeholder="Search…" type="search" name="filter" data-bind="textInput: query" autoplete="off" />

JS:

this.query = ko.observable('');

this.filteredPins = ko.puted(function () {
    if (this.query()) {
        var search = this.query().toLowerCase();
        return ko.utils.arrayFilter(this.pins(), function (pin) {
            return pin.name().toLowerCase().indexOf(search) >= 0;
        });
    } else {
        return pins
    }}, this);