使用淘汰赛使 display = none ？ - 搜索答案

【问题标题】：using knockout to make display = none ? - search使用淘汰赛使 display = none ？ - 搜索
【发布时间】：2018-01-19 20:59:16
【问题描述】：

我正在使用敲除过滤列表并找到正确的列表元素我的问题是：当我找到这个元素时，我怎样才能使它成为第一个元素并隐藏其他列表元素？这是我的 JS：

var myViewModel = {

items: ko.observableArray(),
title: ko.observable('title'),
url: ko.observable('index.HTML'),
query: ko.observable(''),


 items.toLowerCase().indexOf(myViewModel.filterKeyword().toLowerCase()) !== 
   -1;


search: function(value) {
    for (var i = 0; i < myViewModel.items().length ; i++) {
       if (myViewModel.items()[i].toLowerCase().indexOf(value.toLowerCase()) 
      >= 0 )       {
           // this is the elemnt you are searching for ..
           console.log(myViewModel.items()[i]);
      }
      }
       }
         };

这是我的 HTML：

<input placeholder="Search…" type="search" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
  <ul id="myUL" data-bind="foreach: items">
            <li>
              <a onclick="log(this)" data-bind="visible: true, text: $data">
           </a>
            </li>
          </ul>

这是我搜索元素时的控制台 ()

我在这里找到了一些链接，here 我的问题是它删除了数组然后循环！这是不允许的，因为没有要循环的元素！

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

创建一个过滤列表的computed 并将其用于您的ul data-bind。

var myViewModel = {

  items: ko.observableArray(['one', 'two', 'three']),
  title: ko.observable('title'),
  url: ko.observable('index.HTML'),
  query: ko.observable(''),
  filteredItems: ko.pureComputed(function () {
    return myViewModel.items().filter((i) =>
      i.toLowerCase().indexOf(myViewModel.query().toLowerCase()) >= 0
    );
  })
};

ko.applyBindings(myViewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input placeholder="Search…" type="search" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
<ul id="myUL" data-bind="foreach: filteredItems">
  <li>
    <a onclick="log(this)" data-bind="visible: true, text: $data">
    </a>
  </li>
</ul>

【讨论】：