AutoComplete hide popup when no data is available

[Ian]

Hi,

Is it possible when using the autocomplete to not show the popup when there is no data available. I'm aware that there's the no-data template but that still shows the popup even if nothing is attached.

I was considering using the open/close event functionality which might work but I don't think it fully suits the use case.

The scenarios are as follows

1. Start Typing and item found -> show popup
2. Start Typing and no item found -> don't show popup
3. Popup open and we type until no item found -> don't show popup

Any help on this would be appreciated! 

[Martin Bechev]

Hi Ian,

Kendo UI for Angular AutoComplete does not have a built-in option to automatically hide the popup when there are no matching items. However, you can achieve the behavior you described by programmatically controlling the popup visibility using the component’s API.

How to Hide the Popup When No Data is Available

You can use the filterChange event to check the filtered data and then call the toggle() method of the AutoComplete component to open or close the popup as needed:

• When the filtered data array is empty, close the popup.
• When there are matching items, open the popup.

Example Implementation

import { Component, ViewChild } from '@angular/core';
import { AutoCompleteComponent } from '@progress/kendo-angular-dropdowns';

@Component({
  selector: 'my-app',
  template: `
    <kendo-autocomplete
      #autoComplete
      [data]="filteredData"
      (filterChange)="handleFilter($event)">
    </kendo-autocomplete>
  `
})
export class AppComponent {
  public data: string[] = ['Apple', 'Banana', 'Cherry'];
  public filteredData: string[] = this.data;

  @ViewChild('autoComplete', { static: true }) public autoComplete: AutoCompleteComponent;

  public handleFilter(value: string): void {
    this.filteredData = this.data.filter(item => item.toLowerCase().includes(value.toLowerCase()));
    if (this.filteredData.length === 0) {
      this.autoComplete.toggle(false); // Close popup if no items
    } else {
      this.autoComplete.toggle(true); // Open popup if matches exist
    }
  }
}

Resulting Behavior

• Typing and finding a match opens the popup.
• Typing and finding no match closes the popup.
• If the popup is open and the filter changes to no matches, the popup closes immediately.

Live Example

• https://stackblitz.com/edit/angular-dpjoari2?file=src%2Fapp%2Fapp.component.ts 

Reference for toggle() method

• https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/AutoCompleteComponent/#toc-toggle

This approach provides the exact behavior you are looking for without relying on the no-data template. If you need further customization, let me know.

Regards,

Martin Bechev
Progress Telerik