Autofill and highlight + filtering

[Manuel]

Hi all,

I'm not able to get the autocomplete autofill and highlight options working when filtering data.

Here the autocomplete control definition

            ngDefaultControl

            [allowCustom]='!forceSelection'

            [autofill]='autofill'

            (blur)='onBlur($event)'

            [cssClass]='styleClass'

            (change)='onChange($event)'

            (dataBound)='onDataBound($event)'

            [dataSource]='suggestions'

            [fields]='fields'

            (filtering)='onFiltering($event)'

            (focus)='onFocus($event)'

            [highlight]='highlight'

            [minLength]='minLength'

            [(ngModel)]='ngModel' id='item'

            [placeholder]='placeholder'

            >

Here the onFiltering defintion:

    onFiltering(e: FilteringEventArgs): void {

        e.preventDefaultAction = true; // We prevent popup opening (we open it on data bound)

        this.resetPages();

        this.completeMethod.emit(new Object({ query: e.text }));

    }

The completeMethod raise an event to load data from backend (into suggestions variable). I would ask if there something wrong on my code.

Thank you

[Ponmani Murugaiyan]

Hi Manuel,  

Greetings from Syncfusion support. 

Based on your provided information, we checked the reported query and we suggest you to use the custom filtering using filtering event as like below code, while filter down the data source and return the resulted data to DropDownList via updateData method to display its list items and also to get the highlighted character in the word. 

public onFiltering(e) { 

    e.preventDefaultAction = true; 

    let query = new Query(); 

    query =  e.text != "" ? query.where("Name", "startswith", e.text, true) : query; 

    e.updateData(this.tempData, query); 

} 

 

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

Kindly check with the above sample to meet your requirement and for autofill case, we will check and update further details in 2 business days. 

Regards, 

Ponmani M 

[Manuel]

Dear Ponmani,

thank you for your answer but it seems it doesn't solve the problem. Just to clarify a simple the scenario: we get a database with > 10k items. When hitting a part of word inside the autocomplete control we need to load data from a backend service: e.g. the first 20 items that match the filter.

So we are implementing the search inside the onFiltering method.

Your solution seems to have a problem since tempData is the collection of data with are trying to load in an async way from the backend server so we cannot consider these data populated during onFiltering execution.

[Ponmani Murugaiyan]

Hi Manuel, 

Thanks for the update. 

The UpdateData is a public method in the dropdownlist component that is used to perform custom filtering. The following parameters are passed to this method. The first is an array of data, and the second is a query. As a result, items in the array of objects will be filtered based on the query, and corresponding list items will be generated and updated in the component. In Filtering event, you can filter down the data source and return the resulted data to AutoComplete via updateData method to display its list items. 

So, we suggest you to store the resulted data which you fetch from the remote server in a variable and then pass that variable to the updateData method first parameter as mentioned in the above type to filter the items based on query. Kindly apply the above suggested solution in your application to meet your requirement, and revert us if you need further assistance. 

Regards, 

Ponmani M