Im having 2 problems with my search filter:
-
When i write a search word in my search bar and change the filter
option shows me the result before i press enter. (It should not
function before i press enter) -
The second problem i have is when i have a search result and
changing the search word and press enter, i get no results.
Typescript
import { Component, OnInit } from '@angular/core';
import { RecipesService } from 'src/app/recipes.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
recipeslist: any;
searchWord = '';
type = '';
intolerances = '';
diet = '';
constructor(private recipesService: RecipesService) {
}
loadRecipes() {
this.recipesService.getSearch(this.searchWord, this.type, this.intolerances, this.diet).subscribe(recipes => {
this.recipeslist = recipes.results;
console.log(this.recipeslist);
});
}
ngOnInit(): void {
}
handleSearch(event: any): void {
this.searchWord = event.target.value;
console.log(this.searchWord);
}
changeType(event: any): void {
this.type = event.target.value;
console.log(this.type);
}
IntolerancesType(event: any): void {
this.intolerances = event.target.value;
console.log(this.intolerances);
}
dietType(event: any): void {
this.diet = event.target.value;
console.log(this.diet);
}
search() {
this.loadRecipes();
}
}
html
<section class="bg-slate-400 h-screen w-full" style="margin-top: -112px;">
<div class="flex h-full flex-col items-center justify-center">
<div class="bg-white mt-8 box-border flex w-96 items-center">
<input type="text" class="w-full bg-transparent px-4" ngModel placeholder="Search here ..." aria-label="serach" (input)="handleSearch($event)" id="search" type="text" (change)="search()" />
<button class="bg-slate-300 py-3 px-6 text-sm" disabled="!form.valid" (click)="search()" type="button">Search</button>
</div>
<div class="container mx-auto mt-5 flex flex-col items-center justify-center">
<div style="display: flex;">
<div class="box-border overflow-hidden bg-white p-1">
<select formControlName="typeControl" (change)="changeType($event)">
<option value="">Mealtype</option>
<option value="main course">Main course</option>
<option value="dessert">Dessert</option>
<option value="appetizer">Appetizer</option>
<option value="salad">Salad</option>
<option value="breakfast">Breakfast</option>
<option value="soup">Soup</option>
</select>
</div>
<div class="box-border overflow-hidden bg-white p-1">
<select formControlName="IntolerancesControl" (change)="IntolerancesType($event)">
<option value="">Intolerances</option>
<option value="dairy">Dairy</option>
<option value="egg">Egg</option>
<option value="gluten">Gluten</option>
<option value="peanut">Peanut</option>
</select>
</div>
<div class="box-border overflow-hidden bg-white p-1">
<select formControlName="dietControl" (change)="dietType($event)">
<option value="">Diet</option>
<option value="gluten Free">Gluten Free</option>
<option value="ketogenic">Ketogenic</option>
<option value="vegetarian">Vegetarian</option>
<option value="lacto-vegetarian">Lacto-Veg</option>
</select>
</div>
</div>
</div>
</div>
</section>
>Solution :
the event that you should do is not (change), you want ENTER pressed then and only then execute the filter, to do this you must implement (keyup.enter).
<input type="text" class="w-full bg-transparent px-4" ngModel placeholder="Search here ..." aria-label="serach" (input)="handleSearch($event)" id="search" type="text" (keyup.enter)="search()" />