本章节将演示Ant Design Vue Select客户端搜索和服务器端搜索,客户端搜索即网页端对下拉选项进行筛选,服务器端搜索即将关键词发往服务器返回并显示下拉结果。
主要属性 | 说明 |
---|---|
show-search | 将输入框设置成搜索框模式 |
not-found-content | 没有数据时,不进行提示 |
search |
用户输入关键词时的事件 |
filter-option |
设置false禁止客户端筛选 |
<template>
<a-select
show-search
:value="value"
placeholder="请输入关键词"
style="width: 200px"
:default-active-first-option="false"
:filter-option="false"
:not-found-content="null"
@search="handleSearch"
@change="handleChange"
>
<a-icon slot="suffixIcon" type="search"></a-icon>
<a-select-option v-for="d in data" :key="d.value">
{{ d.text }}
</a-select-option>
</a-select>
</template>
<script>
export default {
data() {
return {
data: [],//搜索事件
value: undefined,
};
},
methods: {
//输入框事件
handleSearch(keyword) {
//模拟往服务器发送请求
this.ajax(keyword);
},
handleChange(value) {
console.log(value);
this.value=value;
},
//模拟往服务器发送请求
ajax(keyword){
var that=this;
that.data = [];
for(var i=0;i<10;i++) {
that.data.push({
value: i,
text:keyword+i,
});
};
}
},
};
</script>
例子
主要属性 | 说明 |
---|---|
show-search | 将输入框设置成搜索框模式 |
not-found-content | 没有数据时,不进行提示 |
filter-option |
设置true开启客户端筛选,这和服务器端刚好相反 |
<template>
<div>
<a-select show-search default-value="google" style="width: 200px" @change="onChange">
<a-icon slot="suffixIcon" type="search" />
<a-select-option value="yahoo">
yahoo.com
</a-select-option>
<a-select-option value="itxst">
itxst.com
</a-select-option>
<a-select-option value="disabled" disabled>
Disabled
</a-select-option>
<a-select-option value="google">
google.com
</a-select-option>
</a-select>
</div>
</template>
<script>
export default {
methods: {
onChange(value) {
console.log(`selected ${value}`);
},
},
};
</script>
例子