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

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

Answer 1

自从有人问到我已经有一段时间了，但我将展示如何使它工作。基本上就像documentations所示。

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

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

1 个答案: