You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design-vue/components/vc-select/demo/suggest.vue

67 lines
1.4 KiB

<script>
import Select, { Option } from '../index'
import '../assets/index.less'
import { fetch } from './tbFetchSuggest'
export default {
data () {
return {
data: [],
value: [],
}
},
methods: {
onKeyDown (e) {
if (e.keyCode === 13) {
console.log('onEnter', this.state.value)
this.jump(this.state.value)
}
},
onSelect (value) {
console.log('select ', value)
this.jump(value)
},
jump (v) {
console.log('jump ', v)
// location.href = 'https://s.taobao.com/search?q=' + encodeURIComponent(v);
},
fetchData (value) {
this.value = value
fetch(value, (data) => {
this.data = data
})
},
},
render (h) {
const data = this.data
const options = data.map((d) => {
return <Option key={d.value}>{d.text}</Option>
})
return (<div>
<h2>suggest</h2>
<div onKeydown={this.onKeyDown}>
<Select
style={{ width: '500px' }}
combobox
value={this.value}
placeholder='placeholder'
defaultActiveFirstOption={false}
getInputElement={() => <input/>}
showArrow={false}
notFoundContent=''
onChange={this.fetchData}
onSelect={this.onSelect}
filterOption={false}
>
{options}
</Select>
</div>
</div>)
},
}
</script>