vue-generic-autocomplete

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