How to do a live search in angular?

Question

I need your help. With the help of the following code, I am trying to do a live search: when entered in input, my targetListOptions array, which I use in select, option, changed to me. The following code doesn't give me any errors, but when I enter data, nothing happens. I am searching on the name field which comes from the backend. I'm trying to make it a normal input without using autocomplete. Please tell me how to implement this search, what am I doing wrong? Thank you very much

HTML

<mat-select formControlName="targetListValue">
   <input formControlName="searchTargetInput">
   <mat-option *ngFor="let targetItem of targetListOptions" [value]="targetItem.id">
     {{ targetItem.name }}
   </mat-option>
</mat-select>

Typescript

public form: FormGroup;
public targetListOptions: ITargetData[] = [];

ngOnInit(): void {
   this.form = new FormGroup({
     templateListValue: new FormControl(null, [Validators.required]),
     searchTargetInput: new FormControl('')
   })

this.form.controls.searchTargetInput.valueChanges.subscribe(() =>
   this.targetListOptions = this.targetListOptions.filter(element => element.name.includes(name)));

}

score 0 · Answer 1 · answered Jul 09 '22 at 09:16

0

Important thing destroy your subscription on ngOnDestroy, also try to debug your code and check if anything happening inside the subscription, you can add console log or can debug in browser sources.

answered Jul 09 '22 at 09:16

Prashant Singh

611
1
5
14

Sorry, I didn't understand what you mean. Can you please show me how to do this? Thank you – Dmitry Chernyak Jul 09 '22 at 09:32
update your code like this `this.form.controls.searchTargetInput.valueChanges.subscribe((inputValue) => { console.log({inputValue}) this.filteredTargetListOptions = this.targetListOptions; this.filteredTargetListOptions = this.filteredTargetListOptions.filter(element => element.name.includes(inputValue)); });`. and then check if it is going inside that scope while you are changing value. – Prashant Singh Jul 09 '22 at 18:42
for unsubscription part follow https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription – Prashant Singh Jul 09 '22 at 18:44

Japhet Mukendi · Accepted Answer · 2022-07-09T15:42:20.443

First of all, with this your line of code. How do you get the new searchTargetInput? Because in your code, you are subscribing but you don’t get the new value. Here what you are doing:

this.form.controls.searchTargetInput.valueChanges.subscribe(() =>this.targetListOptions = this.targetListOptions.filter(element => element.name.includes(name)));}

And here what you should be doing:

this.form.controls.searchTargetInput.valueChanges.subscribe((inputValue) => {
  this.filteredTargetListOptions = this.targetListOptions;
  this.filteredTargetListOptions = this.filteredTargetListOptions.filter(element => element.name.includes(inputValue));
});

Do you see the difference in the arrow function argument?

I don’t recommand that you filter the targetListOptions array. Let’s say the user write something in the searchTargetInput field. Because we are subscribing to value changes of that input, it’s going to trigger the code we wrote; so the filter. And because after filtering, the result is stored inside the targetListOptions thus overwriting the values you got from the backend. Let us still assume the user made a mistake when he was writing in the searchTargetInput. Even if he delete one character, the targetListOptions is already changed permanently because of the first filter. So here the first and simplest solution.

Typescript

public form: FormGroup;
public targetListOptions: ITargetData[] = [];
public filteredTargetListOptions: ITargetData[] = [];
ngOnInit(): void { /** your code*/}

Where are you populating the targetListOptions? Does it get it values from the backend? If so, where is the call to the backend done? Because, if the targetListOptions still stores the default empty array you initialised before the ngOnInit, then even if you try to filter that empty array you will end up with an empty array.

How to do a live search in angular?

2 Answers2