title: typeahead functionality gives suggestions even after clearing the search input
body: <p>I am new to angular. I am using the zomato api to build an angular app where the users search for restaurants after giving a location in the searchbox.</p>
  
  <p>I tried to implement a typeahead without using any libraries. The problem is that after even after clearing out the search input I get suggestions .</p>
  
  <p><strong>screenshots</strong></p>
  
  <p><img src="https://i.stack.imgur.com/u7d1d.png" alt="empty searchbox giving suggestions"></p>
  
  <p><img src="https://i.stack.imgur.com/DZ99u.png" alt="normal"></p>
  
  <p>Here's the  component and service files.</p>
  
  <p><strong>Component file</strong></p>
  
  <pre><code> export class HomeComponent implements OnInit {    
    results ;
  
    locations =[];
  
    queryField : FormControl = new FormControl();
  
    constructor(private zomato : ZomatoService) { }
  
  
    ngOnInit() {
      this.queryField.valueChanges.pipe(debounceTime(800),
      distinctUntilChanged(),
      switchMap((query)=&gt;
  
          this.zomato.getLocations(query)
  
      )
      ).subscribe(
  
       response =&gt;{
        this.results = response;
       // console.log(this.results.location_suggestions);
       this.locations = this.results.location_suggestions;
      }    
      );    
    }
  </code></pre>
  
  <p><strong>service file</strong></p>
  
  <pre><code>const headers = new HttpHeaders( ).set("user-key","76b921cfd73b8312cb243fe4185c65cc");
  
  @Injectable({
    providedIn: 'root'
  })
  export class ZomatoService {
  
    public baseUrl = "https://developers.zomato.com/api/v2.1/";
  
    constructor(private http : HttpClient) { }
  
    getLocations(location){          
        return this.http.get(this.baseUrl + "locations?query=" + location+"&amp;count=10",{headers});    
    }
  
    getLocation_Details(entityId , entityType){
  
      return this.http.get(this.baseUrl + "location_details?entity_id=" + entityId + "&amp;entity_type=" + entityType,{headers});
  
    }    
  }
  </code></pre>