fes.js/packages/fes-doc/docs/ui/templates/select/3.md

---
layout: templateLayout
---
```vue
<template>
    <Wb-select v-model="value3" filterable>
        <wb-option :value="1">北京市</wb-option>
        <wb-option :value="2">上海市</wb-option>
        <wb-option :value="3">深圳市</wb-option>
        <wb-option :value="4">杭州市</wb-option>
        <wb-option :value="5">南京市</wb-option>
        <wb-option :value="6">重庆市</wb-option>
    </Wb-select>
    <Wb-select v-model="value3" filterable @on-search="search">
        <wb-option v-for="item in options" :key="item" :value="item">{{item}}</wb-option>
    </Wb-select>
</template>
<script>
export default {
    data() {
        return {
            value3: '',
            options: [1, 2, 3, 4],
        }
    },
    methods: {
        search(value){
            setTimeout(()=>{
                this.options = [];
                for(let i=1; i< 10; i++){
                    this.options.push(value + '|' + i)
                }
            }, 500)
        }
    }
}
</script>
```