param: function () {
                return 'foo=' + this.bar + '&q';
            }
      }```

in component change ```param ="q" for :param="param" ```

## Props

##### `name` (*) : Component Identity
will use for Identify the autocomplete component. for multiple use purpose.

<br/>

##### `url` (*) : Ajax URL to fetch
the URL must be active (not from file). the component will fetch JSON from this URL with (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.

<br/>

##### `param` : name of the search query in Ajax call. default ( q )
<br/>

##### `min` : Minimum input typed chars before performing the search query. default ( 3 )
<br/>

##### `limit` : amount of query limit in ajax call.
example, `limit=5` the AJAX URL will be `http://some-url.com/API/list?q=blabla&limit=5`

<br/>

##### `anchor`(*) : Anchor for Suggestion list
Anchor for listing suggestions. Example `anchor="name"` will get the name object of your JSON data for suggestion listing like ("Bambang", "Sukijan", "Bejo") in the demo above.

<br/>

##### `label` : Description for Suggestion list
For description to your suggestion. the uses is like `anchor` 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.

<br/>

##### `model` : v-model like for your component
v-model like of component to make two data binding working like usual.

<br/>

##### `placeholder` : input placeholder (optional)
<br/>

##### `class` : Component Class (optional)
will generate an class for input element. this only for the input element in autocomplete.

<br/>

##### `id` : Component Id (optional)
will generate an Id for input element.

<br/>

## Callback Events
Make an events in component's parent than the [vue-autocomplete](https://github.com/BosNaufal/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);
    this.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');
  },

}