javascript - 在带有 angular 的 fuse.js 中，我们在哪里传递搜索到的字符串和选项？

Question

我在 javascript 项目中使用过 fuse.js。但是现在我正在使用 angular 并且我已经为 fuse.js 安装了所需的模块，但是我无法使用它的功能在 angular 中搜索单词。

我尝试使用文档提供的代码，但不确定代码从哪里使用搜索关键字。

https://www.npmjs.com/package/angular-fusejs

<ul>
  <li *ngFor="let element of (DataJSONobject | fusejs:searchString:{keys: ['name', 'author']})">
    {{ element.author.firstName }}
  </li>

</ul>

//In Javascript file//
var fuse = new Fuse(newData, options);
var sresult = fuse.search(searchValue);
console.log(sresult);

我需要在 Angular 中使用我在 Javascript 文件中使用过的类似代码。

Answer 1

我看到这个问题已经有一段时间了，但我会展示我是如何让它工作的。基本上与文档显示的完全一样。

npm i fuse.js

component.html
<div class="row">
  <div class="input-field col s12 m4">
    <input id="fuzzy-player" type="text" (input)="search($event)">
    <label for="fuzzy-player">Search...</label>
  </div>
</div>

//displaying results
<div id="search-results" class="row left">
  <div class="collection col s12" 
       [ngClass]="fuseResults && fuseResults.length > 0 ? '' : 'hide'">

    <ng-template [ngIf]="fuseResults && fuseResults.length > 0">
//showing top 5 results but can be changed to "let i of fuseResults"
      <a class='collection-item sortable' *ngFor="let i of [0, 1, 2, 3, 4]" (click)="filteredSelected($event)">
        {{ fuseResults[i].name }}
      </a>
    </ng-template>
  </div>
</div>
<div style="clear: both"></div>


component.ts
import * as Fuse from 'fuse.js'
...
export class Component implements OnInit {
  public fuse: any;
  public fuseResults: any[];

  ngOnInit() {
    //instantiate Fuse with your object and options
    this.fuse = new Fuse(list, options);
  }

  //binding to the HTML input element
  public search(evt: KeyboardEvent): void {
    const target = evt.target as HTMLInputElement;
    this.fuseResults = this.fuse.search(target.value);
  }
}