Filtering and Selection of AutoComplete for a field of an array of objects

[Wei Cheng]

I am have data like following:

{

companyname:'',

locations:[

{address: 'address1', city:'city1', state:'state1'},

{address: 'address2', city:'city2', state:'state2'},

{address: 'address3', city:'city3', state:'state3'},

]

}

I used a v-for loop for handling the locations, and we planned to use AutoComplete for the handling address field, any good example for such scenario? how do we know which instance of the component is triggering the filtering method etc. thanks -- I am using VueJS 2 by the way

[Ponmani Murugaiyan]

Hi Wei, 

Query: How do we know which instance of the component is triggering the filtering method. 

You can find the specific component id in the filtering event using the target as like below code snippet. 

https://codesandbox.io/s/dynamic-placeholder-forked-6rj89j?file=/src/App.vue 

methods: { 

  filtering: function (args) { 

    var val = args.event.target.parentElement.getElementsByClassName("e-control")[0].getAttribute("id"); 

    console.log(val); 

    var sportsData = [ 

      { Id: "game1", Game: "Badminton" }, 

      { Id: "game2", Game: "Football" }, 

      { Id: "game3", Game: "Tennis" }, 

    ]; 

    var query = new Query(); 

    query = args.text != "" ? query.where("Game", "startswith", args.text, true): query; 

    args.updateData(sportsData, query); 

  }, 

  

 

Regards, 

Ponmani M 

[Wei Cheng]

Hi, Ponmani:

Thanks for the reply but my questions was how to handle the Filtering/Option update and Selection on an Array of AutoComplete fields, something like following:

        <div v-for="(location,index) in locations" :key="location.locationid">

                    <div class="form-row">

                    <div class="form-row-input">

                        <ejs-autocomplete :dataSource="dataAddresses"

                            placeholder="Address: "

                            :fields="addressAutocompleteFields"

                            ref="addressAutocomplete"

                            :minLength="addressAutocompleteMinLength"

                            :filtering="onAddressAutocompleteFiltering(index)"

                            :change="onAddressSelection(index)"

                            float-label-type="Always"

                            cssClass="locationAddress"

                            v-model="location.locationAddress"></ejs-autocomplete>  

                    </div>

                    </div>

        </div>

onAddressAutocompleteFiltering(e, index) {

console.log('here', e);

console.log(this.$refs);

e.preventDefaultAction = true;

if (e.text.length >= this.$refs.addressAutocomplete[index].ej2Instances.minLength) {

this.$refs.addressAutocomplete[index].ej2Instances.showSpinner();

this.locations[index].locationAddress = e.text;

// Call Open API Here to update the option list

}

},

I tried to use Index here like code above and it didn't work, we would need to access to both the AutoComplete specific instance and also the e event data.

Thanks

Wei

P.S. I knew we probably could implement a custom component for each location, but that may require us to use props and emit events to facilitate the communication between components. wonder whether we could avoid these..

[Wei Cheng]

one of the challenge for me here is that we have only access to the parameters of either e or index parameter of  onAddressAutocompleteFiltering, one at a time, not both the same time. any way to get around this limitation?

[Ponmani Murugaiyan]

Hi Wei, 

Query: One of the challenge for me here is that we have only access to the parameters of either e or index parameter of  onAddressAutocompleteFiltering, one at a time, not both the same time. any way to get around this limitation? 

 

We suggest you to use the filtering event with arrow function to get the both parameters in the event. 

<ejs-multiselect 

          id="multiselect" 

          popupHeight="250px" 

          :allowFiltering="allowFiltering" 

          :dataSource="searchData" 

          :fields="fields" 

          placeholder="Select a country" 

          :filtering="(e) => onAddressAutocompleteFiltering(e, index)" 

        ></ejs-multiselect> 

 

methods: { 

  onAddressAutocompleteFiltering: function (e, index) { 

    var query = new Query(); 

    query = 

      e.text != "" 

        ? query.where("Country", "startswith", e.text, true) 

        : query; 

    e.updateData(searchData, query); 

  }, 

}, 

 

 

 

Sample: https://codesandbox.io/s/syncufsion-v18-dropdown-forked-s9jr9w 

Regards, 

Ponmani M 

[Wei Cheng]

Hi, Ponmani:

I tested your suggestion, it worked.

Thanks a lot!

Wei

[Ponmani Murugaiyan]

Hi Wei, 

Welcome, we are glad to hear that the issue has been resolved. 

Regards, 

Ponmani M