1.0.2 • Published 5 years ago
@bachdgvn/vue-auto-complete v1.0.2
vue-auto-complete
An auto-complete input component for the web built with Vue 2.x.
Installing
To install the latest stable version:
npm install @bachdgvn/vue-auto-complete
Usage
Import component in main.js
import VieAutoComplete from "@bachdgvn/vue-auto-complete";
Vue.component("vie-auto-complete", VieAutoComplete);
<template>
<div id="app" style="display: flex; flex-direction: row;">
<div style="flex: 1;">
<div style="margin-bottom: 10px;">
Autocomplete with prepared data
</div>
<vie-auto-complete :items="firstSelectable"
@on-search="onSearch"
/>
</div>
<div style="flex: 1;">
<div style="margin-bottom: 10px;">
Autocomplete with async data
</div>
<vie-auto-complete :items="secondSelectable"
async
@on-input="onInputAsync"
@on-search="onSearch"
/>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
keywords: [],
};
},
computed: {
firstSelectable() {
return [
'Lê Thị Lan',
'Nguyễn Hoài Nam',
'Hoàng Văn Ngọc',
'Đỗ Ngọc Hân',
'Trần Kỳ Phương',
];
},
secondSelectable() {
return this.keywords.map(item => item.keyword);
},
},
methods: {
async onInputAsync(value) {
if (!value || value === '') {
this.keywords = [];
return this.keywords;
}
const url = `http://django.example.com/keywords/?limit=10&offset=0&search=${value}`;
const response = await fetch(url,
{
headers: {
authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkb',
'Content-Type': 'application/json',
},
});
const body = await response.json();
this.keywords = Array.isArray(body.results) ? body.results : [];
return this.keywords;
},
onSearch(value) {
console.log('search: ', value);
},
},
};
</script>