83 lines
1.5 KiB
Markdown
83 lines
1.5 KiB
Markdown
|
|
<cn>
|
|
#### ๆ็ดขๆก
|
|
่ชๅจ่กฅๅ
จๅ่ฟ็จๆฐๆฎ็ปๅใ
|
|
</cn>
|
|
|
|
<us>
|
|
#### Search Box
|
|
Autocomplete with remote ajax data.
|
|
</us>
|
|
|
|
```html
|
|
<template>
|
|
<a-select
|
|
mode="combobox"
|
|
:value="value"
|
|
placeholder="input search text"
|
|
style="width: 200px"
|
|
:defaultActiveFirstOption="false"
|
|
:showArrow="false"
|
|
:filterOption="false"
|
|
@change="handleChange"
|
|
>
|
|
<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: '',
|
|
}
|
|
},
|
|
methods: {
|
|
handleChange (value) {
|
|
console.log(value)
|
|
this.value = value
|
|
fetch(value, data => this.data = data);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
|