淘汰搜索/筛选

Knockout Search / Filter

本文关键字：筛选 搜索 淘汰      更新时间：2023-09-26

我是Knockout JS的新手，我很难完成这个项目。

我创建了一个地图网站，在页面上显示了一系列城镇热门地点的徽章。其想法是，页面左侧的搜索栏将过滤掉地图上与搜索查询不匹配的名称。页面左侧还有一个"主"列表，搜索栏也会从中筛选。

我在jsfiddle上用了一个例子：http://jsfiddle.net/mythical/XJEzc/但我在把同样的逻辑应用到我的代码中时遇到了麻烦。

这是：

HTML:

        <li>
            <input class="form-control" placeholder="Search…" type="search" name="filter" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="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;
    });
});

根据我设置的逻辑，如果名称从pin构造函数中删除，它将从映射中删除。

以下是我的工作示例：http://jamesiv.es/projects/map/

HTML

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

更改为

<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;
    });
});

更改为

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

如果使用比3.2 更新的Knockout版本，只想更新代码

从value和valueUpdate更改为textInput，如所示

HTML:

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

JS:

this.query = ko.observable('');
this.filteredPins = ko.computed(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);
相关文章：