I currently have a search field in the header that retrieves a list of records when you type a search term and click on one of them. The search function utilizes debounceTime to reduce API requests, but I'm encountering an issue where the search doesn't work on the overview page. How can I fix this and make the search function properly on the overview page?
Below is the code for the search input field:
<input #searchText [(ngModel)]="searchFilterText" id="m_quicksearch_input_disabled" autocomplete="off" type="text" name="searchFilterText" class="m-list-search__form-input" value="" placeholder="Search...">
The search function in the header component after debounceTime processing is as follows:
processSearchTerm() {
if (this.searchTextRef) {
fromEvent(this.searchTextRef.nativeElement, 'keyup')
.pipe(
debounceTime(AppConsts.DEBOUNCE_TIME),
distinctUntilChanged()
).subscribe(
value => this.getMyData(this.searchTextRef.nativeElement.value.trim())
);
}
}
This is the code fetching search results in the header component:
getMyData(searchTerm: string): void {
if (searchTerm) {
this.initSpinner = true;
this._myDataServiceProxy.getmyDatasorSearchResults(
searchTerm
).subscribe(result => {
this.myDataRecords = result.items;
this.myDataRecordTotal = result.totalCount;
this.initSpinner = false;
});
} else {
this.myDataRecordTotal = AppConsts.RESET_MYDATA_RECORD_COUNT;
}
}
Code snippet to view detailed information about the data in the header component:
goToMyDataOverview(id: number): void {
if (id) {
this._router.navigate([`/app/main/data/${id}`]);
}
}
Anchoring the list items in the header component with an anchor tag:
<a (click)="goToMyDataOverview(item.id)"
href="javascript:;"
class="m-list-search__result-item"
*ngFor="let item of myDataRecords; let i = index;">
<span class="m-list-search__result-item-pic"><img class="m--img-rounded" src="assets/common/images/default-profile-picture.png" title="" alt="Profile picture"></span>
<span class="m-list-search__result-item-text">{{item.firstname}} {{item.lastname}}</span>
</a>
Here's the code for the overview component:
ngOnInit(): void {
const id = this.route.snapshot.paramMap.get('id');
if (id) {
this.getData(id);
}
}
getData(id: string): any {
if (id) {
this.initSpinner = true;
this._dataServiceProxy.getDataInformationById(
id
).subscribe(result => {
this.myData = result.data;
});
}
}