Vue Generic Autocomplete component

Props

If you wish to use other frameworks to customize the component, you can add boostrap classes to the input and icons to the suggestions list, .eg Font Awesome

 <template>
    <autocomplete
        @searchword="autocomplete"
        :list="list"
        :icons="'fas fa-map-marker-alt'"
        :classes="'form-control'"
    />
</template>

Required | Name | Type | Default | Description| | - | - | - | - |- | | 1. list | Array | - | Array of data to auto complete from |

Optional

| Name | Type | Default | |- | - | - | - | | 2. clases | String | - |
| 3. icons | String | - |
| 4. placeholder | String | null |
| 5. suggestionsLimit | Number | 4 |

Events

• onFocus
  • Fires whenever the input is focued, emits the focus event.
• searchword
  • payload: The text on the auto complete input You can the make a call to your api / or resource that you want the suggestions

  <template>
      <autocomplete
          @searchword="autocomplete"
          :list="list"
      />
  </template>
  
  export default {
      data(){
          return {
              list : []
          };
      },
      methods: {
          autocomplete(searchText){
              // only call the resource when search text length is greater that 2 
              if (searchText.length > 2) {
                  fetch(`http://autocomplete.travelpayouts.com/places2?term=${searchText}&locale=en&types[]=country&callba0ck`)
                  .then(response => response.json())
                  .then(data => {
                      this.list = data;
                  })
                  // eslint-disable-next-line
                  .catch(error => console.error(error));
              }else{
                  this.list = [];
              }
          }
      }
  }

• on-chosen
  • The chosen item selected on the sugges list
  • payload : the chosen item