javascript - 在带有 angular 的 fuse.js 中,我们在哪里传递搜索到的字符串和选项?
问题描述
我在 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 文件中使用过的类似代码。
解决方案
我看到这个问题已经有一段时间了,但我会展示我是如何让它工作的。基本上与文档显示的完全一样。
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);
}
}
推荐阅读
- pyspark - 解析jsons pyspark的字符串
- postgresql - Express Vue 未创建关联,userId 为空
- java - 应为 '}' 但找到 eof
- javascript - Javascript 加载更多图像的数组 onclick。使用 Firebase
- css - 角 7 | mat-tab 活动 | 样式未反映
- android - java.lang.IllegalArgumentException:错误:无法解析 APK 文件:
- c++11 - CUDA:如何使用 barrier.sync
- python - 从 HTML 获取链接(Selenium 和 Python)
- c# - 升级到 asp.net core 2.2 后的空 href
- three.js - 如何在 WEBGL 中使用 gl_LastFragData?