86 lines
1.7 KiB
Markdown
86 lines
1.7 KiB
Markdown
<cn>
|
|
#### ๆ็ดขๆก
|
|
ๆ็ดขๅ่ฟ็จๆฐๆฎ็ปๅใ
|
|
</cn>
|
|
|
|
<us>
|
|
#### Search Box
|
|
Search with remote data.
|
|
</us>
|
|
|
|
```tpl
|
|
<template>
|
|
<a-select
|
|
showSearch
|
|
:value="value"
|
|
placeholder="input search text"
|
|
style="width: 200px"
|
|
:defaultActiveFirstOption="false"
|
|
:showArrow="false"
|
|
:filterOption="false"
|
|
@search="handleSearch"
|
|
@change="handleChange"
|
|
:notFoundContent="null"
|
|
>
|
|
<a-select-option v-for="d in data" :key="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>
|
|
```
|