DEV Community

Cover image for AutoComplete Component with Vue Composition API in VueJS
Aaron K Saunders
Aaron K Saunders

Posted on

AutoComplete Component with Vue Composition API in VueJS

Simple AutoComplete Component built using a custom built useAutoComplete hook I built using the vue composition api. Since I am quite fond of Ionic Framework's Web Components, I used the components to construct a clean presentation of the work.

The hook takes in two parameters, options which is the array of data to search, and optionKey which is what property in the array of objects to search on.

I this example I have loaded in some data from to populate the array of data and I am used the email property as my filter.

The dropdown that appears in the ion-card component from Ionic Framework; and the rest of the magic is accomplished using css with some position.

import { toRefs, reactive } from "@vue/composition-api";

const useAutoComplete = (options, key) => {
  let state = reactive({
    userInput: "",
    filteredSuggestions: [],
    suggestions: options,
    selectedItem: {}

  let selected = _item => {
    state.userInput = _item[key];
    state.filteredSuggestions = [];
    state.selectedItem = { userInput: state.userInput, item: _item };

  let onChange = _event => {
    let i = state.userInput;
    state.selectedItem = { userInput: state.userInput, item: null };
    if (i.length === 0) {
      state.filteredSuggestions = [];
    const r = state.suggestions.filter(
      suggestion => suggestion[key].toLowerCase().indexOf(i.toLowerCase()) > -1
    state.filteredSuggestions = r;
  return {

export default useAutoComplete;

Enter fullscreen mode Exit fullscreen mode

Full Source Code

Top comments (0)