vue-autocomplete.min.js

/*! Copyright (c) 2016 Naufal Rabbani (http://github.com/BosNaufal)
* Licensed Under MIT (http://opensource.org/licenses/MIT)
*
* Version 0.0.1
*
*/
Vue.transition("showAll",{});
var VueAutocomplete=Vue.extend({template:'<input type="text" :id="id" :class="class" :name="name" :placeholder="placeholder" v-model="type" @input="input(type)" @dblclick="showAll" @blur="hideAll" @keydown="keydown" @focus="focus" autocomplete="off"/> <div class="autocomplete transition autocomplete-{{ name }}" id="autocomplete-{{ name }}" v-show="showList"> <ul> <li v-for="data in json" transition="showAll" :class="activeClass($index)"> <a href="#" @click.prevent="$emit(\'selectList\',data)" @mousemove="mousemove($index)"> <b>{{ data[anchor] }}</b> <span>{{ data[label] }}</span> </a> </li> </ul> </div>',props:{id:String,
"class":String,name:String,placeholder:String,model:String,anchor:{type:String,required:!0},label:String,url:{type:String,required:!0},param:{type:String,"default":"q"},min:{type:Number,"default":0},limit:{type:String,"default":""}},data:function(){return{showList:!1,type:"",json:[],focusList:""}},watch:{type:function(a,b){return this.$parent.$data[this.model]=a}},methods:{clearInput:function(){this.showList=!1;this.type="";this.json=[];this.focusList=""},cleanUp:function(a){return JSON.parse(JSON.stringify(a))},
input:function(a){this.showList=!0;this.$dispatch("autocomplete:input",this.$get("name"),a);this.$dispatch("autocomplete-"+this.$get("name")+":input",a);this.$emit("getData",a);return this.$parent.$data[this.model]=a},showAll:function(){this.json=[];this.$emit("getData","");this.$dispatch("autocomplete:show",this.$get("name"));this.$dispatch("autocomplete-"+this.$get("name")+":show");this.showList=!0},hideAll:function(a){var b=this;this.$dispatch("autocomplete:blur",this.$get("name"),a);this.$dispatch("autocomplete-"+
this.$get("name")+":blur",a);setTimeout(function(){b.showList=!1;b.$dispatch("autocomplete:hide",b.$get("name"));b.$dispatch("autocomplete-"+b.$get("name")+":hide")},250)},focus:function(a){this.focusList=0;this.$dispatch("autocomplete:focus",this.$get("name"),a);this.$dispatch("autocomplete-"+this.$get("name")+":focus",a)},mousemove:function(a){this.focusList=a},keydown:function(a){a=a.keyCode;if(this.showList){switch(a){case 40:this.focusList++;break;case 38:this.focusList--;break;case 13:this.$emit("selectList",
this.json[this.focusList]);this.showList=!1;break;case 27:this.showList=!1}a=this.json.length-1;this.focusList=this.focusList>a?0:0>this.focusList?a:this.focusList}},activeClass:function(a){return{"focus-list":a==this.focusList}}},events:{selectList:function(a){a=this.cleanUp(a);this.type=a[this.anchor];this.showList=!1;this.$dispatch("autocomplete:selected",this.$get("name"),a);this.$dispatch("autocomplete-"+this.$get("name")+":selected",a)},getData:function(a){var b=this;if(!(a.length<this.min)&&
null!=this.url){this.$dispatch("autocomplete:before-ajax",b.$get("name"),a);this.$dispatch("autocomplete-"+b.$get("name")+":before-ajax",a);var c=new XMLHttpRequest,d;""!=this.$get("limit")?(this.limit=parseFloat(this.limit),d=""!=this.limit?"&limit="+this.limit:""):d="";c.open("GET",this.url+"?"+this.param+"="+a+d,!0);c.send();c.addEventListener("progress",function(a){a.lengthComputable&&(b.$dispatch("autocomplete:ajax-progress",b.$get("name"),a),b.$dispatch("autocomplete-"+b.$get("name")+":ajax-progress",
a))});c.addEventListener("loadend",function(a){a=JSON.parse(this.responseText);b.$dispatch("autocomplete:ajax-loaded",b.$get("name"),this,a);b.$dispatch("autocomplete-"+b.$get("name")+":ajax-loaded",this,a);b.json=a})}}},created:function(){this.type=this.$parent.$data[this.model]}});Vue.component("autocomplete",VueAutocomplete);