Multiple autocomplete components

[webdevsyd]

Hello There

I would like to ask if how can I handle this in your autocomplete components. I have an array of autocomplete fields. My problem now is I need to know the autocomplete field that has selected a data like what index. Here's my code below, as you can it has a for loop.

<div class="field is-horizontal" v-for="(route,index) in routes">
         <div class="field-label is-normal">
           <label class="label">
             <span class="icon is-left">
               <i class="fa fa-map-marker"></i>
             </span>
           </label>
         </div>
         <div class="field-body">
           <div class="field">
             <p class="control is-expanded">
               <autocomplete
                 url="https://maps.googleapis.com/maps/api/geocode/json?address="
                 anchor="formatted_address"
                 label="geometry.location.lat"
                 name="autocomplete"
                 :classes="{ input: 'input' }"
                 placeholder="Route"
                 :customParams="{ token: 'AIzaSyDSzFBMnP2tBVYSABOlZsup2ognSGlVHWg' }"
                 :process="processJSON"
                 :on-select="getData"
               >
               </autocomplete>
             </p>
           </div>
         </div>
       </div>

[BosNaufal]

Hi @webdevsyd, Change the name attribute to be prefixed with index? and get that attribute in the onSelect function?

[cheykeodina]

How can we get attribute onSelect function?

[benedict-w]

I think I may have a similar situation - I have two autocomplete fields on a page (inside a parent vue), the first works perfectly, but the second does not append results to the list, although the AJAX requests are sent.

It should be possible to have two on the same page, is there something I am doing wrong?

<template>

...

   <autocomplete
        :id="direction + '-from'"
        url="/airports"
        anchor="code"
        label="name"
        :name="direction + '[from]'"
        v-model="from"
        :classes="{ wrapper: 'form-wrapper', input: 'form-control', list: 'data-list', item: 'data-list-item' }"
        placeholder="Search airport..."
        :min="2"
    ></autocomplete>

    <autocomplete
         :id="direction + '-to'"
         url="/airports"
         anchor="code"
         label="name"
         :name="direction + '[to]'"
         v-model="to"
        :classes="{ wrapper: 'form-wrapper', input: 'form-control', list: 'dropdown-menu', item: 'dropdown-item' }"
         placeholder="Search airport..."
         :min="2"
    ></autocomplete>

...

</template

<script>

    import Autocomplete from 'vue2-autocomplete-js'

    export default {
     
       ...

        components: {
            Autocomplete
        }

    };
</script>

[benedict-w]

In my case the list did not show because of a conflict with the Bootstrap style dropdown-menu used on the second list :/

[graker]

Hi guys!

How can we get attribute onSelect function?

Have you figured this out?

I have similar problem. Having multiple autocomplete fields on page, I need to figure out which one is calling onSelect and onInput events. I imagine I can try to achieve it by using jQuery and getting some id from element with focus. But is there a more proper way to access properties of specific autocomplete component when there are many of them?

[graker]

Just in case someone would wonder, for now I did it with jquery:

$('input.autocomplete-input:focus').prop('id').replace('autocomplete-', '');

This code would return index (like 0..N) for the element which just triggered onSelect or onInput callback.

HTML for multiple autocomplete items with id set:

<li v-for="(item, index) in items">
  <div class="form-group form-inline">
    <autocomplete
      url="/search"
      v-bind:id="'autocomplete-' + index"
      placeholder="John Doe"
      anchor="name"
      label="email"
      :onInput="autocompleteNameChanged"
      :onSelect="autocompleteGetData"></autocomplete>
  </div>
</li>

Anyway, being kinda new to Vue.js, I suppose that this might not be the best way to address it.