@kolach/vue-infinite-autocomplete
v2.0.2-beta3
Published
Vue infinite-autocomplete wrapper
Downloads
8
Readme
vue-infinite-autocomplete
Vue 2.x Wrapper for infinite-autocomplete library
Note: Whenever I mention the CORE, then I'm targeting the infinite-autocomplete library
Install
via npm:
$ npm i --save vue-infinite-autocomplete
Live Demo
- Live Demo
Usage Example (See "demo" folder)
<template>
<vue-infinite-autocomplete
:options=currentOptions
:value=currentValue
v-on:select="handleOnSelect"
v-on:loading-state="handleLoadingStateChange"
v-on:error="handleError">
</vue-infinite-autocomplete>
</template>
<script>
import VueInfiniteAutocomplete from 'vue-infinite-autocomplete';
export default {
components: {
"vue-infinite-autocomplete": VueInfiniteAutocomplete
},
data() {
return {
currentValue: "",
currentOptions: [
{ text: 'Islam Attrash', value: 1},
{ text: 'Shai Reznik', value: 2},
{ text: 'Uri Shaked', value: 3},
{ text: 'Salsabel Eawissat', value: 4},
{ text: 'Mohammed Attrash', value: 5},
{ text: 'Mike Brocole', value: 6},
{ text: 'John Stewart', value: 7},
{ text: 'Stone Cold', value: 8},
{ text: 'Triple H', value: 9},
{ text: 'Sting The Stinger', value: 10},
{ text: 'Superman', value: 11},
{ text: 'Batman', value: 12},
{ text: 'The Joker', value: '13'},
{ text: 'Vanilla Icecream', value: '14'},
{ text: 'Stephane macmahon', value: '15'},
{ text: 'infinite autocomplete', value: '16'},
{ text: 'Barak Obama', value: null},
{ text: 'Bill Goldberg', value: 17},
{ text: 'Inishtanispfl', value: 'whooo? whoo?'},
{ text: 'Saloma', value: [1,2,3]},
{ text: 'Yosra Eawissat', value: {object: true}},
{ text: 'Medium Articles', value: 'what'}
]
}
},
methods: {
changeOptions() {
this.currentOptions = [
{ text: 'Islam AttrashX', value: 1 },
{ text: 'Shai ReznikY', value: 2 },
{ text: 'Uri ShakedZ', value: 3 },
{ text: 'Salsabel EawissatE', value: 4 }
]
},
handleOnSelect(target, selectedValue) {
console.log("selected: ", selectedValue);
},
handleLoadingStateChange(loadingState) {
console.log("loading state: ", loadingState);
},
handleError(error) {
console.log("error: ", error);
}
}
}
</script>
Params
/**
* current value
*/
value?: string;
/**
* data static source
*/
options?:Array<{text: string, value: any}>;
/**
* max height for the options
*/
maxHeight?:string;
/**
* data dynamic api source
*/
getDataFromApi?(text:string, page:number, fetchSize:number):Promise<Array<any>>;
/**
* Chunk fetch size
*/
fetchSize?:number,
/**
* Customized input class to override the default input
*/
customizedInput?:IInputCompoenentConstructor;
/**
* Customized options class to override the default input
*/
customizedOptions?:IOptionsComponentConstructor;
Events
/**
* select event output handler when choosing an option
*/
v-on:select?(targetElement, selectedValue);
/**
* loading-state event output handler when choosing an option
*/
v-on:loading-state?(loadingState: boolean);
/**
* error event output handler when exception thrown
*/
v-on:error?(error: Error);