Unable to get selected item when suggestion list is having duplicate items

[Cyril Ovely]

HI Team,

We are having one query regarding the ejs AutoComplete functionality. We are having the data with duplicate key Item (ItemCode) having different Stock Quantity (StockQuantity).

while selecting the row with the particular combination, the first combination is getting autocomplete defiantly.

Below is the sample code.

Ex: Here when we select the fourth row with ItemCode(20060459) and 13 Stock quantity combination, the first row with ItemCode(20060459) and Stock Quantity(5) getting selected.
https://codesandbox.io/s/syncufsion-v18-dropdown-forked-zkee37?file=/src/App.vue

Regards,
Cyril Ovely

[Sureshkumar P]

Hi Cyril,

We cannot utilize the duplicate value property to keep component values; instead, we must use the text property to keep track of and permit only unique values to be set to the value property of autocomplete components. The text property can have repeated texts in the same situation; however, the value property can only have unique values to carry out its essential functions.

Regards,

Sureshkumar P

[Cyril Ovely]

Hi Suresh Kumar,

I appreciate your update. I gave objects in the list array the "uniqId" field. When I turned on filtering for the autocomplete, the "value" property is being filtered instead of the "text" property, which is what I require.

Please let me know how I can apply filtering on the "text" property. CodesandBox attached below for reference.


Syncufsion v18 dropdown (forked) - CodeSandbox


Regards,
Cyril Ovely

[Sureshkumar P]

Cyril, you can achieve your requirement by using the filtering event.

Find the code example here:

 <ejs-autocomplete

          :dataSource="data"

          :fields="fields"

          :placeholder="watermark"

          :suggestionCount="30"

          :filtering="onComponentFiltering"

          popupHeight="450px"

          :itemTemplate="iTemplate"

          highlight="true"

          allowFiltering="true"

          @change="updateItem"

        ></ejs-autocomplete>

 

 methods: {

    updateItem(event) {

      console.log(

        "Selected Item",

        event.itemData.ItemCode,

        "Selected Item quantity",

        event.itemData.StockQuantity

      );

    },

    onComponentFiltering(args) {

      args.preventDefaultAction = true;

      let query = new Query();

      query = query.where("ItemCode", "contains", args.text, true);

      args.updateData(data, query);

    },

  },

 

Find the modified sample here: https://codesandbox.io/s/syncufsion-v18-dropdown-forked-k4gj7n