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

1 <template>
2    <autocomplete
3        @searchword="autocomplete"
4        :list="list"
5        :icons="'fas fa-map-marker-alt'"
6        :classes="'form-control'"
7    />
8</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

  1<template>
  2    <autocomplete
  3        @searchword="autocomplete"
  4        :list="list"
  5    />
  6</template>
  7
  8export default {
  9    data(){
  10        return {
  11            list : []
  12        };
  13    },
  14    methods: {
  15        autocomplete(searchText){
  16            // only call the resource when search text length is greater that 2 
  17            if (searchText.length > 2) {
  18                fetch(`http://autocomplete.travelpayouts.com/places2?term=${searchText}&locale=en&types[]=country&callba0ck`)
  19                .then(response => response.json())
  20                .then(data => {
  21                    this.list = data;
  22                })
  23                // eslint-disable-next-line
  24                .catch(error => console.error(error));
  25            }else{
  26                this.list = [];
  27            }
  28        }
  29    }
  30}

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