Autocomplete Component For Vue 2. It's based on vue-autocomplete

You can import vue2-autocomplete.vue to your vue component file like this and process it with your preprocessor.

You can install it via NPM

npm install vue2-autocomplete-js

Or Just put it after Vue JS~

<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="./dist/vue2-autocomplete.js"></script>
<script>
  // Don't Forget to register it
  new Vue({
    components: {
      autocomplete: Vue2Autocomplete
    }
  });
</script>

Don't forget to import vue 2 css. You can link it via html

<link rel="stylesheet" href="vue2-autocomplete-js/dist/style/vue2-autocomplete.css">

Or You can import it using commonJS

require('vue2-autocomplete-js/style/vue2-autocomplete.css')

Its style is very customizable. You can put any CSS over it. And You can add custom class via its prop.

import Autocomplete from 'vue2-autocomplete-js'
// Or
var Autocomplete = require('vue2-autocomplete-js');

<template>

  <autocomplete
    url="http://localhost/proyek/goodmovie/api/api/v1/search"
    anchor="title"
    label="writer"
    :on-select="getData">
  </autocomplete>

</template>


<script>

  import Autocomplete from 'vue2-autocomplete-js';

  export default {

    components: { Autocomplete },

    methods: {
      getFiles(obj){
        console.log(obj);
      }
    }
  };

</script>

Full Props

<template>

  <autocomplete
    url="http://localhost/proyek/goodmovie/api/api/v1/search"
    anchor="title"
    label="writer"
    :on-select="getData"

    id="custom id"
    class-name="custom class name"
    placeholder="placeholder"
    :init-value="initial value"
    :init-value="initial value"
    :custom-params="{ token: 'dev' }"
    :min="3"

    :on-input="callbackEvent"
    :on-show="callbackEvent"
    :on-blur="callbackEvent"
    :on-hide="callbackEvent"
    :on-focus="callbackEvent"
    :on-select="callbackEvent"
    :on-before-ajax="callbackEvent"
    :on-ajax-progress="callbackEvent"
    :on-ajax-loaded="callbackEvent">
  </autocomplete>

</template>

the URL must be active (not from file). the component will fetch JSON from this URL and passing one params (default : q) query. like:

http://some-url.com/API/list?q=

There are no filter and limit action inside the component. So, do it in your API logic.

name of the search parameter to query in Ajax call. default is q=

Minimum input typed chars before performing the search query. default is 0

It's a object property name that passed by your API. It's used for Anchor in suggestions list. Example anchor="name" will get the name property of your JSON object. Like ("Bambang", "Sukijan", "Bejo") in the demo above.

Same as anchor but it's used for subtitle or description of list

Placeholder for input

Custom class name for autocomplete component

Custom id name for autocomplete component

You can make a callback event via props.

On Input event in autocomplete

On Show event in autocomplete list

When autocomplete is blured

When autocomplete list is hidden

When autocomplete input in focus mode

When user has selected one item in the list

Before the ajax send

While ajax is fetching the data

When ajax process is totally loaded

You can do some methods by accessing the component via javascript.

this.$refs.autocomplete.someMethod()

To set the value of the autocomplete input

Just Contact Me At:

• Email: [email protected]
• Skype Id: bosnaufal254
• twitter: @BosNaufal

MIT Copyright (c) 2016 - forever Naufal Rabbani