I have a search bar that displays results when fed with text input, the problem is:

1. the search results do not go away even if the input field/search bar is empty.
2. It does not close if I press ESC or click outside the search bar or search results. I have tried different things with renderer and host view, I can't make it work. If it was regular js, I'm sure I would have been to solve this. Angular just has too many special quirks, I need some help with this.

this is what the problem looks like: problem

components.ts file (removed my failed attempts):

import {
  Component,
  OnInit,
  Renderer2,
  ElementRef,
  ViewChild,
} from '@angular/core';

import { faSearch } from '@fortawesome/free-solid-svg-icons';
import { CountryService } from '../services/country.service';
import { OneCountry } from '../country';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css'],
})
export class SearchComponent implements OnInit {
  faSearch = faSearch;
  countries: OneCountry[] = [];
  searchTerm: any;
  cachedCountries: OneCountry[] = [];
  

  constructor(private countryService: CountryService) {}

  ngOnInit(): void {}

  onKeyPressEvent(event: KeyboardEvent): void {
    this.getCountries();
  }

  getCountries(): void {
    this.countryService.searchCountries().subscribe({
      next: (countries) => (
        (this.countries = countries),
        (this.cachedCountries = this.countries),
        console.log(this.countries)
      ),
    });
  }

  search(value: string): void {
    this.countries = this.cachedCountries.filter((val) =>
      val.name.toLowerCase().includes(value)
    );
  }
}

This is the template file:

<div id="search-component" >
  <div
    
  >
    <figure >
      <fa-icon
        
        [icon]="faSearch"
      ></fa-icon>
    </figure>

    <input
      
      placeholder="Search for a country..."
      #searchBox
      name="searchTerm"
      id="search-box"
      (input)="search(searchBox.value)"
      [(ngModel)]="searchTerm"
      (keypress)="onKeyPressEvent($event)"
    />
  </div>

  <ul >
    <li
      
      *ngFor="let country of countries | searchFilter: searchTerm; index as i"
    >
      <a
        *ngIf="i < 10"
        routerLink="/detail/{{ country.name }}"
        
        >{{ country.name }}</a
      >
    </li>
  </ul>
</div>

CodePudding user response：

"Angular has too many special quirks". The problem I'm guessing is that your not reseting this.countries back to []. You could wire in a blur:

   <input 
      ...
      (blur)="onBlur()" />

And then in your class

onBlur(){
   this.countries = [];
}

You should really look into observables though, and as @kinglish mentioned in the comment you have an input and a keypress which is odd.