by BosNaufal

BosNaufal / vue-autocomplete

Autocomplete Component for Vue.Js

206 Stars 47 Forks Last release: Not found MIT License 23 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


Autocomplete Component for Vue.Js

vue Autocomplete component


Vue Autocomplete is a Vue.Js component to make some suggestions for user input. come with .vue and .js file make it easier to be installed for your next project.

Vue Autocomplete is inspired by aFarkas remote-list Jquery Plugin. crafted with simple javascript (Also ES6 support), and doesn't require Jquery.


  • full customizable
  • Already, Complete callback event
  • Included
  • well commented code
  • writen in ES6 (Still in Learning now)
  • doesn't require any javascript libs, except Vue.Js
  • Support multiple autocomplete components


Simply include the vue-autocomplete.js to your HTML or web page file, next to Vue.Js. You can take a peek an example at example.html. And don't forget to include vue-autocomplete.css file when you choose this way.


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

import autocomplete from ./vue-autocomplete.vue
// Or
var autocomplete = require('./vue-autocomplete.vue');




Full Example:

Additional parameters

If you need to pass more parameters in url, use Computed Properties ( :


computed: {
            param: function () {
                return 'foo=' + + '&q';

in component change

param ="q" for :param="param"


(*) : Component Identity

will use for Identify the autocomplete component. for multiple use purpose.

(*) : Ajax URL to fetch

the URL must be active (not from file). the component will fetch JSON from this URL with (default :

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

: name of the search query in Ajax call. default ( q )

: Minimum input typed chars before performing the search query. default ( 3 )

: amount of query limit in ajax call.


the AJAX URL will be

(*) : Anchor for Suggestion list

Anchor for listing suggestions. Example

will get the name object of your JSON data for suggestion listing like ("Bambang", "Sukijan", "Bejo") in the demo above.

: Description for Suggestion list

For description to your suggestion. the uses is like

props but for the description of each suggestion. like ("Alamat", "alamat sesuai ktp", "alamat") in the demo above. not required but if it's null the component will look bad.

: v-model like for your component

v-model like of component to make two data binding working like usual.

: input placeholder (optional)

: Component Class (optional)

will generate an class for input element. this only for the input element in autocomplete.

: Component Id (optional)

will generate an Id for input element.

Callback Events

Make an events in component's parent than the vue-autocomplete component will dispatch some events to it. ```javascript ... events: {

/** * Global Autocomplete Callback Event * * @event-name autocomplete:{event-name} * @param {String} name name of auto * @param {Object} data * @param {Object} json - ajax-loaded only */

// Autocomplete on before ajax progress 'autocomplete:before-ajax': function (name,data){ console.log('before-ajax',name,data); },

// Autocomplete on ajax progress 'autocomplete:ajax-progress': function(name,data){ console.log('ajax-progress',data); },

// Autocomplete on ajax loaded 'autocomplete:ajax-loaded': function(name,data,json){ console.log('ajax-loaded',data,json); },

// Autocomplete on focus 'autocomplete:focus': function(name,evt){ console.log('focus',name,evt); },

// Autocomplete on input 'autocomplete:input': function(name,data){ console.log('input',data); },

// Autocomplete on blur 'autocomplete:blur': function(name,evt){ console.log('blur',evt); },

// Autocomplete on show 'autocomplete:show': function(name){ console.log('show',name); },

// Autocomplete on selected 'autocomplete:selected': function(name,data){ console.log('selected',data); = data; },

// Autocomplete on hide 'autocomplete:hide': function(name){ console.log('hide',name); },

/** * Spesific Autocomplete Callback Event By Name * * @event-name autocomplete-{component-name}:{event-name} * @param {String} name name of auto * @param {Object} data * @param {Object} json - ajax-loaded only */

// Autocomplete on before ajax progress 'autocomplete-people:before-ajax': function(data){ console.log('before-ajax-people',data); },

// Autocomplete on ajax progress 'autocomplete-people:ajax-progress': function(data){ console.log('ajax-progress-people',data); },

// Autocomplete on ajax loaded 'autocomplete-people:ajax-loaded': function(data,json){ console.log('ajax-loaded-people',data,json); },

// Autocomplete-people on focus 'autocomplete-people:focus': function(evt){ console.log('focus-people',evt); },

// Autocomplete-people on input 'autocomplete-people:input': function(data){ console.log('input-people',data); },

// Autocomplete-people on blur 'autocomplete-people:blur': function(evt){ console.log('blur-people',evt); },

// Autocomplete-people on show 'autocomplete-people:show': function(){ console.log('show-people'); },

// Autocomplete-people on selected 'autocomplete-people:selected': function(data){ console.log('selected-people',data); },

// Autocomplete-people on hide 'autocomplete-people:hide': function(){ console.log('hide-people'); },

} ```

Clear Method

If you need to Clear or Netralize your autocomplete, You can simply make some refs then call a method named

. You can take a look at the Example :

  // ... another vue scope

methods: { clearAutocomplete() { this.$refs.myAutocomplete.clearInput() } },

// ...

Thank You for Making this helpful for your projects~

Hopefully this can be usefull for the others.

Let's talk about some projects with me

Just Contact Me At: - Email: [email protected] - Skype Id: bosnaufal254 - twitter: @BosNaufal


MIT Copyright (c) 2016 - forever Naufal Rabbani

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.