vue输入框联想、候选

话不多说，直接上图：

 

<template>
    <div class="binding">
        <a-input v-model="city" style="width:100px " @change="inputChange"/>
        <div v-show="isShow">
            <p v-for="item in cityOptions" @click="selectedCity(item)" style="cursor: pointer">{{item}}</p>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                isShow:true,
                city:"",
                cityArr:['北京','北海','东北','上海','武汉','东京','广州','广元市','上饶','上水市'],
                cityOptions:[]
            }
        },
        methods:{
            selectedCity(item){
                this.city = item
                this.isShow = false
            },
            inputChange(){
                    if(this.city.length==0){
                        this.isShow = false
                    }else{
                        this.isShow = true;
                        const cityArr = [];
                        this.cityArr.forEach(item => {
                            if(item.indexOf(this.city)>=0){
                                cityArr.unshift(item)
                            }
                        })
                        this.cityOptions = cityArr;
                    }
            }
        }
    }
</script>
<style scoped>

</style>