Data Browser - Viewing Site  Sector 23 Code Bank Logged in as:  Guest  


Automatically Open Angular Kendo Autocomplete on click or focus
When you click into an Angular Kendo Autocomplete, like most of these third party tools, you just get a blank textbox with no idea what to do. Usually I want these to open and show the first 20 or so suggestions...

To fix, you'll need to create a new angular component to wrap the kendo-autocomplete (this allows you to repeat them in a group for example).

In the html <kendo-autocomplete> tag, add handlers for (opened), (closed), (focus), and (click). Also add #ddList as a handle so you can reference the control from typescript.

In the .ts event handlers for (opened) and (closed), set a flag to track if the dropdown is Open.

In the .ts event handlers for (focus) and (click), check if the dropdown is Closed. If so, call ddList?.toggle(true); to open it.

"ddList" will be a reference to your dropdown:
@ViewChild("ddList", {static:false})public ddList:any;

You will want to add some @Input variables to control your dropdown:

selection = ''; // the value; bind this with [(ngModel)]

selectionChange: EventEmitter<any> = new Event Emitter(); // to handle changes

valueField = ''; // in case complex data binding

data:any[]=[]; // the data

required = false;

name = ''; // a unique name will need to be passed for ngModel to work.

Add all of these properties to the html tag as usual for a kendo autocomplete tag.

Wire up an event called by (valueChange) that fires your custom selectionChange event:
this.selection = value;

And of course, don't forget to change the filterSettings to "contains" or it will auto-complete only if the start of the text matches:

public filterSettings:DropDownFilterSettings={
caseSensitive:false, operator: 'contains'};
HTML: (kendoDropDownFilter]=filterSettings

Created By: amos 1/11/2024 9:29:28 AM