@bachdgvn/vue-auto-complete

vue-auto-complete

An auto-complete input component for the web built with Vue 2.x.

Installing

To install the latest stable version:

npm install @bachdgvn/vue-auto-complete

Usage

Import component in main.js

import VieAutoComplete from "@bachdgvn/vue-auto-complete";

Vue.component("vie-auto-complete", VieAutoComplete);

<template>
  <div id="app" style="display: flex; flex-direction: row;">
    <div style="flex: 1;">
      <div style="margin-bottom: 10px;">
        Autocomplete with prepared data
      </div>
      <vie-auto-complete :items="firstSelectable"
                         @on-search="onSearch"
      />
    </div>
    <div style="flex: 1;">
      <div style="margin-bottom: 10px;">
        Autocomplete with async data
      </div>
      <vie-auto-complete :items="secondSelectable"
                         async
                         @on-input="onInputAsync"
                         @on-search="onSearch"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',

  data() {
    return {
      keywords: [],
    };
  },

  computed: {
    firstSelectable() {
      return [
        'Lê Thị Lan',
        'Nguyễn Hoài Nam',
        'Hoàng Văn Ngọc',
        'Đỗ Ngọc Hân',
        'Trần Kỳ Phương',
      ];
    },

    secondSelectable() {
      return this.keywords.map(item => item.keyword);
    },
  },

  methods: {
    async onInputAsync(value) {
      if (!value || value === '') {
        this.keywords = [];
        return this.keywords;
      }

      const url = `http://django.example.com/keywords/?limit=10&offset=0&search=${value}`;
      const response = await fetch(url,
        {
          headers: {
            authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkb',
            'Content-Type': 'application/json',
          },
        });
      const body = await response.json();
      this.keywords = Array.isArray(body.results) ? body.results : [];
      return this.keywords;
    },

    onSearch(value) {
      console.log('search: ', value);
    },
  },
};
</script>

Props

Name	Type	Required	Default	Description
items	Array	true	[]	Suggested words
async	Boolean	false	false	If the suggested words is taken from the remote service

Events

Name	Description
on-input	Return the value in input each time the user manipulates the input.
on-search	Return the value in input when the user selects a word from the list or simply presses Enter.