vue-simple-autocomplete v0.9.10
Vue Simple Autocomplete
Compatible with Vue 2.x
Installation
yarn add vue-simple-autocomplete
Use
This component is used as a base to create your own autocomplete. For example, If I need to create an autocomplete for originProcesso
, I would create my component originProcessoAutocomplete
, like this:
<template>
<div>
<VueSimpleAutocomplete
:items="originsProcess"
:selected-item="originProcesso"
@change="searchOrigins"
@value-selected="onOriginSelected"
:is-loading="loadingOrigins"
:get-display-value="displayOrigin"
:min-length="2"
placeholder="Type to search"
></VueSimpleAutocomplete>
</div>
</template>
<script>
import originProcessApi from "../../services/api/originProcessApi";
import VueSimpleAutocomplete from "vue-simple-autocomplete";
export default {
name: "originProcessoAutocomplete",
components: {
VueSimpleAutocomplete,
},
model: {
prop: "originProcesso",
event: "change",
},
props: {
originProcesso: Object,
},
data() {
return {
originsProcess: [],
loadingOrigins: false,
};
},
created() {
this.originProcessApi = new originProcessApi();
},
methods: {
async searchOrigins(name) {
try {
this.originsProcess = [];
this.$emit("change", {});
if (name == null || name.length === 0) {
return;
}
this.loadingOrigins = true;
this.originsProcess = await this.originProcessApi.getOriginProcessAutocomplete(
name
);
this.loadingOrigins = false;
} catch (err) {
this.loadingOrigins = false;
}
},
onOriginSelected(origin) {
this.$emit("change", origin);
},
displayOrigin(origin) {
if (origin && origin !== "" && origin.name) {
return origin.name;
}
return "";
},
},
};
</script>
<style lang="scss" scoped></style>
Props
items: Array of items to display on the list showed by the autocomplete. Usually the result of an api query. Default is
[]
.isLoading: Boolean value indicating if a search is being made. When this value is true, the autocomplete will show the message provided with
isLoadingMessage
. Default isfalse
.isLoadingMessage: String value showed when isLoading is true. Default is
Carregando resultados...
.noResultsMessage: String value showed when items is empty. Default is
Nenhum resultado encontrado
.getDisplayValue: Function that receives the selected item from
items
. It should return a string value that will be showed on the input in the autocomplete. Default is(item) => item
.selectedItem: The selectedItem from
items
. Default is{}
.minLength: Number indicating the minimum number of characters for the autocomplete to start a search. Default is
1
.placeholder: Placeholder string for the input in the autocomplete.
Events
change: event triggered when an input of the minLength specified is provided. It receives the value of the input.
value-selected: event triggered when a value is selected in the autocomplete. It receives the value selected.
License
MIT License