Combobox keyboard events

[Dusan Aleksic]

Hi! I'm trying to add a new keyboard event to the combobox component, but it has no API to do this. The keyboardevent object is protected and I can't add to it anything. The only way for me to add keyboard event is if i add it directly via rendered input element like this:

@ViewChild('patientSearch')

public patientSearchObject: ComboBoxComponent

.

.

.

this.patientSearchObject.element.children[0].children[1].addEventListener(

'keydown',

this.onKeyDown

)

Is there any other way? I basically want to be able to populate the combobox with data as I type, the data would come from a service.

[Sevvandhi Nagulan]

Hi Dusan , 

Greetings from Syncfusion support. 

We have filtering event that will trigger every keydown action in the input element. You can also get the typed value in the filtering event arguments (e.text) and pass the value to the updateData method to filter the list items by enabling allowFiltering property to true. Please see the code below, 

[app.component.html] 

 

id='customers' #remote [dataSource]='data' [fields]='remoteFields' [allowFiltering]='true'  [query]='query' [placeholder]='remoteWaterMark' (filtering)='onFiltering($event)' > 

[app.component.ts] 

  public onFiltering(e){ 

    let query: Query = new Query(); 

    //frame the query based on search string with filter type. 

    query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query; 

    //pass the filter data source, filter query to updateData method. 

    e.updateData(this.data, query); // instead of this.data you can pass the api service fetched data 

} 

Sample: https://stackblitz.com/edit/angular-dqpksx-bkwazh?file=app.component.ts 

UG Link: https://ej2.syncfusion.com/angular/documentation/api/combo-box#filtering 

Regards, 

Sevvandhi N