Ant Design Vue AutoComplete 自动完成组件,类似搜索引擎的输入框自动填充功能。
例子
node.js webpack开发方式
<template>
<a-auto-complete
:dataSource="ds"
style="width: 260px"
@select="onSelect"
@search="handleSearch"
placeholder="input here"
/>
</template>
<script>
export default {
data() {
return {
ds: [], //数据源
};
},
methods: {
//搜索事件
handleSearch(value) {
this.ds = !value ? [] : [value, value + value, value + value + value];
},
//选择下拉框事件
onSelect(value) {
console.log('onSelect', value);
},
},
};
</script>
浏览器方式,和webpack方式区别是 dataSource属性改成data-source
<div id="app">
<a-auto-complete
:data-source="ds"
style="width: 260px"
@select="onSelect"
@search="handleSearch"
placeholder="input here">
</a-auto-complete>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
ds: [],
};
},
methods: {
//搜索事件
handleSearch(value) {
this.ds = !value ? [] : [value, value + value, value + value + value];
},
//选择下拉框事件
onSelect(value) {
console.log('onSelect', value);
},
},
});
</script>
node.js webpack开发方式
<template>
<a-auto-complete
:dataSource="dataSource"
style="width: 260px"
@search="onSearch"
@select="onSelect"
>
<a-textarea
placeholder="输入关键词"
class="custom"
style="height: 50px"
@keypress="keyPress"
/>
</a-auto-complete>
</template>
<script>
export default {
data() {
return {
dataSource: [],
};
},
methods: {
//选择事件
onSelect(value) {
console.log('onSelect', value);
},
//搜索事件
onSearch(value) {
this.dataSource = !value ? [] : [value, value + value, value + value + value];
},
//键盘事件
keyPress(ev) {
console.log('KeyPress', ev);
},
},
};
</script>
浏览器方式
<div id="app">
<a-auto-complete
:data-source="ds"
style="width: 260px"
@search="onSearch"
@select="onSelect"
>
<a-textarea
placeholder="输入关键词"
class="custom"
style="height: 50px"
@keypress="keyPress"
/>
</a-auto-complete>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
ds: [],
};
},
methods: {
//选择事件
onSelect(value) {
console.log('onSelect', value);
},
//搜索事件
onSearch(value) {
this.ds = !value ? [] : [value, value + value, value + value + value];
},
//键盘事件
keyPress(ev) {
console.log('KeyPress', ev);
},
},
});
</script>
例子