JSFiddle - React, Tailwind, and code Playground

by helloworld

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-autosuggest.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div id="app">
  <pre v-if="selected">You have selected: '{{selected}}'</pre>
  <vue-autosuggest :suggestions="filteredOptions" :on-selected="onSelected" :limit="10" :input-props="inputProps"></vue-autosuggest>
</div>

CSS

#app {
  padding: 2rem;
}

JavaScript

new Vue({
  data() {
      return {
        selected: '',
        options: [{
          data: ['Frodo', 'Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Éowyn', 'Peregrine Took', 'Boromir', 'Legolas', 'Gimli', 'Gollum', 'Beren', 'Saruman', 'Sauron', 'Théoden']
        }],
        filteredOptions: [],
        inputProps: {
          id: "autosuggest__input",
          onInputChange: this.onInputChange,
          placeholder: "Type 'e'",
        },
        limit: 10
      };
    },
    methods: {
      onSelected(option) {
          this.selected = option.item;
      },
      onInputChange(text) {
        if (text === '' || text === undefined) {
          return;
        }
        
        /* Full control over filtering. Maybe fetch from API?! Up to you!!! */
        const filteredData = this.options[0].data.filter(item => {
          return item.toLowerCase().indexOf(text.toLowerCase()) > -1;
        }).slice(0, this.limit);
        
        this.filteredOptions = [{
          data: filteredData
        }];
      }
    }
}).$mount('#app')