使用剔除显示=无? - 搜索 [英] using knockout to make display = none ? - search

问题描述

我正在使用敲除法过滤列表并找到合适的列表元素，我的问题是:当我找到该元素时，如何使其成为第一个元素并隐藏其他列表元素? 这是我的JS:

I am using knockout to filter through a list and find the right list element my problem is: when I find this element how can I make it the first element and hide other list elments? this is my 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:

---

this is my 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>

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

this is my console when I search for an elment ()

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

here some link I found, here my problem with this is that it removes the array and then loop ! that not allowed since there is no element to loop!

推荐答案

进行 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>

这篇关于使用剔除显示=无? - 搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！