select下拉框变为输入框
我们在使用下拉框时,总会因为数据太多而浪费时间去查找自己需要的数据,后端又需要传Id值,这时不能使用input或者autoComplete组件,应该怎么办呢,下面我们一起来看看,怎么实现select变输入框,且与远程数据相连
<template>
<a-select
show-search
v-model="value"
placeholder="input search text"
style="width: 200px"
<a-select-option v-for="d in data" :key="d.value" :value="d.value">
{{ d.text }}
</a-select-option>
</a-select>
</template>
<script>
import jsonp from 'fetch-jsonp';
import querystring from 'querystring';
let timeout;
let currentValue;
function fetch(value, callback) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value;
function fake() {
const str = querystring.encode({
code: 'utf-8',
q: value,
});
jsonp(`https://suggest.taobao.com/sug?${str}`)
.then(response => response.json())
.then(d => {
if (currentValue === value) {
const result = d.result;
const data = [];
result.forEach(r => {
data.push({
value: r[0],
text: r[0],
});
});
callback(data);
}
});
}
timeout = setTimeout(fake, 300);
}
export default {
data() {
return {
data: [],
value: undefined,
};
},
methods: {
handleSearch(value) {
fetch(value, data => (this.data = data));
},
handleChange(value) {
console.log(value);
this.value = value;
fetch(value, data => (this.data = data));
},
},
};
</script>
添加showSearch
属性后,下拉框就变成输入框了,但是我们发现,输入框模糊搜索是根据value值进行搜索的,怎么让数据根据输入内容搜索呢,只需要在select里面添加一个属性即可
optionFilterProp="children"
此时,就可以根据输入内容进行模糊搜索了