vue input实现模糊搜索，input实现搜索下拉提示

html

<input type="text" v-model="searchContent" style="border:1px solid red" @input="inputFun2">
<div v-for="(item,index) in optionsData" @click="getOptionInfo(item.value,item.text)" v-show="isshow" style="line-height:30px;cursor: pointer;">
       {{item.text}}
</div>

js

new Vue({
    el:"#demo4",
    data(){
          return{
              isshow:false,
              searchContent:"",
              optionsData:[],
              options2:[
                  {value:'1',text:'中国招商银行',id:'123'},
                  {value:'2',text:'中国工商银行',id:'121'},
                  {value:'3',text:'中国银行',id:'231'},
              ],
          }
    },
    methods:{
           inputFun2(){
               this.isshow=true
           },
           getOptionInfo(val,searchName){
               this.isshow=false
               this.searchContent=searchName
           }
    },
    watch:{
         searchContent(){
            var ipt_content=this.searchContent
            if(ipt_content){
                   var item=this.options2.filter(ele=>{
                   console.log(ele)
                   console.log(ele.text)
                   if(ele.text.match(ipt_content)){
                     // console.log(ele.text.match(ipt_content))
                     return ele;
                   }
                })
               this.optionsData=item
            }
            console.log(this.optionsData)
        }
    }

})

效果图