Im having 2 problems with my search filter:

1. 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)

2. 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  style="margin-top: -112px;">
  <div >
    <div >
      <input type="text"  ngModel placeholder="Search here ..." aria-label="serach" (input)="handleSearch($event)" id="search" type="text" (change)="search()" />
      <button  disabled="!form.valid" (click)="search()" type="button">Search</button>
    </div>
    <div >
      <div style="display: flex;">
        <div >
          <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 >
          <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 >
          <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>

CodePudding user response：

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"  ngModel placeholder="Search here ..." aria-label="serach" (input)="handleSearch($event)" id="search" type="text" (keyup.enter)="search()" />