Javascript 淘汰搜索/筛选

我对击倒JS是个新手，我花了很多时间试图完成这个项目

我已经创建了一个地图网站，它在页面上显示了一系列关于镇上流行地点的图钉。其想法是，页面左侧的搜索栏将过滤掉地图上名称与搜索查询不匹配的PIN。页面左侧还有一个“主”列表，搜索栏也将从中筛选

我在这里使用了一个在JSFIDLE上找到的示例：但是我在将相同的逻辑应用到代码中时遇到了麻烦

这是：

HTML:

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

下面是我的工作示例：

HTML

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

改为

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更新的淘汰版本，只想更新代码

如建议，从

值

和

值更新

更改为

文本输入

HTML:

---

这似乎不起作用，名称不再显示，过滤也不起作用。我在这里更新了页面：--谢谢你的浏览，我感谢你的帮助！啊，你已经声明你的数组为可观测数组，每个对象属性都是可观测的。。我们应该把它称为函数而不是变量，我更新了代码，看看它在你的终端上的工作是否成功。现在我只需要弄清楚，如果地图与查询不匹配，如何从地图中删除实际的PIN。谢谢。仅供参考，因为淘汰2.0相关观测值现在称为计算观测值。

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

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

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

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

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