使用knockout使display = none？ - 搜索

Question

我正在使用knockout来过滤列表并找到正确的列表元素我的问题是：当我找到这个元素时，我怎样才能使它成为第一个元素并隐藏其他列表元素？ 这是我的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 我的问题是它删除了数组然后循环！那是不允许的，因为没有要循环的元素！

Answer 1

制作一个过滤列表的computed，并将其用于import { Component, ViewChild, OnInit,HostListener, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { DataTableDirective } from 'angular-datatables'; @Component({ selector: 'app-data-table', templateUrl: './pocDataTable.component.html', styleUrls: ['./pocDataTable.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class PocDataTableComponent implements OnInit { @ViewChild(DataTableDirective) private dataTableElement: DataTableDirective; @HostListener('window:scroll', ['$event']) onResize(event){ this.dataTableElement.dtInstance.then((dtInstance: DataTables.Api) => { console.log("Width: " + event.target); //this.ref.markForCheck(); }); //this.dataTableElement.dtInstance.then((dtInstance: DataTables.Api) => console.log(dtInstance.fixedHeader)); } // Data Table Config: dtOptions: any = {}; reCalculate: any = {}; pages:any; perPage: any; loadingIndicator:boolean = false; reorderable:boolean = true; //dtOptions: any = {}; editing = {}; temp = []; constructor(private ref: ChangeDetectorRef) { } ngOnInit() { // Data Table this.dtOptions = { ajax: '../../public/data/sample.txt', columns: [{ title: 'ID', data: 'index' }, { title: 'Name', data: 'name' }, { title: 'Gender', data: 'gender' }, { title: 'Age', data: 'age' }, { title: 'Phone', data: 'phone' }, { title: 'Address', data: 'address' }, { title: 'Latitude', data: 'latitude' }, { title: 'Longitude', data: 'longitude' }], pagingType: 'full_numbers', stateSave: true, fixedHeader: true }; this.reCalculate = {}; this.pages = [ 10, 50,100,1000 ]; this.perPage = this.pages[0]; //this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => console.log(dtInstance)); } } 。

＆＃13;

＆＃13;

ul data-bind

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;