前端实现带输入查询功能匹配下拉框的几种实现方式

<template>
                  <div>
      <!--  <input type="text" v-model="search">-->
         <input type="search"   v-model="search">
        <ul style="font-size:0.05rem ;">
            <li v-for="(item,index) in items">
                <span>{{item.name}}</span>
                <span>{{item.msg}}</span>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
    data () {
        return {
            search:'',
            name1:[
                {name:'AAA',msg:'aaa'},
                {name:'BBB',msg:'bbb'},
                {name:'CCC',msg:'ccc'},
                {n