How to filter/select autocomplete item passing text from outside input

[CLAUDIO RICCARDI]

Hi.

In my angularjs web app I have got an autocomplete object inside a modal:

<>

<ej2-autocomplete

value="stockProductRef.EquipmentId"

placeholder="Barcode/QR Code del prodotto"

source="barcodeSource"

html-attributes="{name:'EquipmentId'}"

on-filtering="onEquipmentBarcodeFiltering(e,query)"

fields="{value:'EquipmentId', text:'Barcode2D'}"

item-template="<div class='multi-line'>${EquipmentName} [Barcode: ${Barcode1D}]</div>"

on-change="onBarcodeAutocompleteUpdate(e)">ej2-autocomplete>

I would like to scan barcode using a third party library and then set the scanned code to the autocomplete component.

In my .js component I can set the barcode text to the autocomplete, but the on-filtering event is not triggered.

How can I trigger the on-filter event setting the text of the autocomplete?

I mean, if I type my barcode text on the autocomplete input element by hand, everything works well. But if I open another modal dialog which shows the scanner and recognizes the qrcode, I can't pass the scanned code to the autocomplete element triggering the onfilter event. 

I have tested many approaches without success.

In one of these, I have created the following code in the .js component, trying to build a filtering event and then call the updateData method. But I can't get the parent element with the updateData method.

var predicate = new ej.data.Predicate('Barcode2D', 'contains', $scope.qrcode, true);

var query = new ej.data.Query();

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

query = query.where(predicate);

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

e.updateData($scope.equipmentSource, query);

How can I instantiate the "e" object (last line) which has the updateData to call?

I've tried also by calling the dataBind() method, which triggers all the property changes events, with no success.

I'm using the following js library:

filename: ej2.min.js

* version : 17.2.46

Thanks in advance.

Claudio

[UdhayaKumar Duraisamy]

The AutoComplete has built-in support for filtering data items. The filtering operation begins as soon as you start typing characters in the component.

You can refer to the below-shared Syncfusion documentations for more information.

API-Reference: https://ej2.syncfusion.com/angular/documentation/api/auto-complete/#filtering

Filtering in Angular Auto complete component: https://ej2.syncfusion.com/angular/documentation/auto-complete/filtering

Filter using both the text and value fields: https://ej2.syncfusion.com/angular/documentation/auto-complete/how-to/filter

If you face any issue or problem, please share the below mentioned details. Which will help us to validate the issue further and provide you a better solution.

1. A simple, runnable sample that illustrates the issue you are experiencing.
2. Issue replication steps.
3. Video illustration of the issue.

[CLAUDIO RICCARDI]

Hi,

I know that the Autocomplete has built-in functionalities for filtering.

My question is: is it possible to filter without typing into the AutoComplete?

That is, suppose the text/value you want to filter comes from another dialog. Is it possible to copy in the AutoComplete the text/value to filter and trigger the filtering event?

If the answer is YES, can you provide an example?

I have tried with the following code but the filter event is not triggered...

                var element = document.getElementById("ej2-combobox-tofilter");

                var autocompleteElement = element.ej2_instances[0];

                autocompleteElement.focusIn();

                autocompleteElement.fields.value = item[0].EquipmentId;

                autocompleteElement.fields.text = item[0].Barcode2D;

                autocompleteElement.dataBind();

Thanks.

[UdhayaKumar Duraisamy]

Thank you for contacting us regarding the Autocomplete component and the filtering event.

We would like to inform you that the current behavior of the Autocomplete component is intended, and the filtering event will not be triggered for programmatic value changes. This means that if you are changing the value of the component programmatically, the filtering event will not be triggered.