通过API搜索栏自动完成 [英] Search bar Autocomplete from API
问题描述
我正在尝试创建一个具有自动完成功能的图书搜索栏，该栏将在每次按键时动态显示相关结果.一切正常，我正在获取数据，但结果未显示在下拉菜单上
I'm trying to create a book search bar with autocomplete that will show relevant results dynamically with each keypress. Everything is working and I'm getting the data, but results are not showing on the dropdown menu
使用角度8和材料8.2.3
Using angular 8 and Material 8.2.3
我正在尝试创建一个具有自动完成功能的图书搜索栏，该栏将在每次按键时动态显示相关结果.一切正常，我正在获取数据，但结果未显示在下拉菜单上
I'm trying to create a book search bar with autocomplete that will show relevant results dynamically with each keypress. Everything is working and I'm getting the data, but results are not showing on the dropdown menu
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '../app.state/app.state';
import { Observable } from 'rxjs/Observable';
import { UserName } from '../../model/name.model';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
import { MainService } from '../main.service';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
searchForm: FormGroup;
username: Observable<UserName[]>;
searchTerm: string;
searchResult: [];
isLoading = false;
errorMsg: string;
constructor(private store: Store<AppState>, private searchService: MainService, private formBuilder: FormBuilder) {
this.username = store.select('username');
}
ngOnInit() {
this.searchForm = this.formBuilder.group({
searchBar: ''
});
this.onChanges();
}
onChanges(): void {
this.searchForm.get('searchBar').valueChanges.subscribe(val => {
this.searchService.searchingValue(val).subscribe(function(data){
this.searchResult = data.items;
} );
});
}
}
<!-- <p>{{ username.username }}</p> -->
<h1>Book Search</h1>
<form [formGroup]="searchForm">
<!-- <mat-form-field>
<input type="text" matInput formControlName="searchBar" [matAutocomplete]="auto">
</mat-form-field> -->
<mat-form-field>
<input matInput placeholder="Search" aria-label="State" [matAutocomplete]="auto" formControlName="searchBar">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngIf="isLoading" class="is-loading">Loading...</mat-option>
<ng-container *ngIf="!isLoading">
<mat-option *ngFor="let option of searchResult" [value]="option">
<span>{{ option.volumeInfo.title }}</span>
</mat-option>
</ng-container>
</mat-autocomplete>
</mat-form-field>
</form>
推荐答案
onChange() method you have to pipe () first of all rxjs operators like filter, debounceTime, switchMap. here when text input is changed you can check valueChanges first and then in switchMap() you can fire services api calling of data.
onChanges(){
this.searchForm.get('searchBar').valueChanges.pipe(
filter( data => data.trim().length > 0 ),
debounceTime(500),
switchMap( (id: string) => {
return id ? this.serachService.searchingValue(id.replace(/[\s]/g,'')) : of([]);
})
).subscribe(data =>{
this.searchResult = data as Array<{}>;
})
}
此处
- 第一个pipe()运算符是 filter()，用于过滤用户输入的所有黑色空格.因此，没有什么要求api请求.
- 第二个pipe()运算符是 debounceTime(500)，用于等待停止用户键入.并且恰好在5ms搜索字符串在switchMap()的api请求上传递后
- 第三个pipe()运算符是 switchMap()，用于在每次valueChanges之后切换到新的可观察对象.
- first pipe() operator is filter(), used for filter any black spaces entering by user. so, that nothing calls for api requesting.
- second pipe() operator is debounceTime(500), used for waiting to stop user typing. and exactly after 5ms search string is passed on api request of switchMap()
- Third pipe() operator is switchMap(), used to switch to a new observable, after every valueChanges.
search.service.ts
searchingValue(value){
return of(this.bookDetails.filter( booksName => booksName.name.replace(/[\s]/g,'').toLowerCase().indexOf(value.toLowerCase()) === 0 ));
}
这篇关于通过API搜索栏自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
