vue-autocomplete
Version:
Autocomplete Components for Vue.js
297 lines (229 loc) • 7.95 kB
Markdown
Autocomplete Component for [Vue.Js](http://vuejs.org)
<p align="center">
<a href="./" title="Vue Autocomplete">
<img src="./demo.gif" alt="vue Autocomplete component" title="Vue Autocomplete Component"/>
</a>
</p>
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](https://github.com/aFarkas/remote-list). crafted with simple javascript (Also ES6 support), and doesn't require Jquery.
- full customizable
- Already, Complete callback event
- Included `.vue` file
- well commented code
- writen in ES6 (Still in Learning now)
- doesn't require any javascript libs, except [Vue.Js](http://vuejs.org)
- Support multiple autocomplete components
## Install
Simply include the [vue-autocomplete.js](./vue-autocomplete.js) to your HTML or web page file, next to [Vue.Js](http://vuejs.org). You can take a peek an example at [example.html](./example.html). And don't forget to include [vue-autocomplete.css](./vue-autocomplete.css) file when you choose this way.
Or
You can import [vue-autocomplete.vue](./vue-autocomplete.vue) to your vue component file like [this](./vueku.js) and process it with your preprocessor.
```javascript
import autocomplete from ./vue-autocomplete.vue
// Or
var autocomplete = require('./vue-autocomplete.vue');
```
minimal:
```html
<autocomplete
name="people"
url="http://localhost:3000/remote-list/klien"
anchor="value"
label="label"
model="vModelLike">
</autocomplete>
```
Full Example:
```html
<autocomplete
id="input__id-optional"
class="input_class optional"
name="people"
placeholder="Type Here"
url="http://localhost:3000/remote-list/klien"
param="q"
limit="5"
anchor="value"
label="label"
model="vModelLike">
</autocomplete>
```
If you need to pass more parameters in url, use Computed Properties (https://vuejs.org/guide/computed.html) :
Example:
``` computed: {
param: function () {
return 'foo=' + this.bar + '&q';
}
}```
in component change ```param ="q" for :param="param" ```
will use for Identify the autocomplete component. for multiple use purpose.
<br/>
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 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');
},
}
```
<br/>
If you need to Clear or Netralize your autocomplete, You can simply make some refs then call a method named ```clearInput()```. You can take a look at the [Example](./index.html) :
```html
<button @click="clearAutocomplete">Clear</button>
<autocomplete
id="input__id-optional"
class="input_class optional"
name="people"
placeholder="Type Here"
url="http://localhost:3000/remote-list/klien"
param="q"
limit="5"
anchor="value"
label="label"
model="vModelLike"
v-ref:my-autocomplete>
</autocomplete>
```
```javascript
// ... another vue scope
methods: {
clearAutocomplete() {
this.$refs.myAutocomplete.clearInput()
}
},
// ...
```
Hopefully this can be usefull for the others.
Just Contact Me At:
- Email: [bosnaufalemail@gmail.com](mailto:bosnaufalemail@gmail.com)
- Skype Id: bosnaufal254
- twitter: [@BosNaufal](https://twitter.com/BosNaufal)
[](http://opensource.org/licenses/MIT)
Copyright (c) 2016 - forever Naufal Rabbani