@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>

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.