vue-autosuggest

import Vue from 'vue'; import { VueAutosuggest } from 'vue-autosuggest'; Vue.use(VueAutosuggest); // Register globally, or import locally into a component new Vue({ el: '#app', components: { VueAutosuggest }, data() { return { query: '', selectedItem: null, suggestionsData: [{ data: ['Frodo', 'Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Éowyn'] }] }; }, methods: { onInputChange(input) { this.query = input; console.log('Input changed:', input); // In a real application, you would typically fetch suggestions from an API here // and update this.suggestionsData based on the input. }, selectHandler(selected) { this.selectedItem = selected.item; console.log('Item selected:', selected.item); }, clickHandler(event) { console.log('Input clicked:', event); }, }, template: ` <div class="app-container"> <h3>Vue Autosuggest Example</h3> <vue-autosuggest :suggestions="suggestionsData" :input-props="{id:'autosuggest__input', placeholder:'Search characters...'}" @input="onInputChange" @selected="selectHandler" @click="clickHandler" > <template slot-scope="{suggestion}"> <span class="my-suggestion-item">{{suggestion.item}}</span> </template> </vue-autosuggest> <p v-if="selectedItem" style="margin-top: 15px;">Selected: <strong>{{ selectedItem }}</strong></p> <p style="margin-top: 10px;">Current input: <em>{{ query }}</em></p> </div> ` });