css

<style>
        *{
            margin:0;
            padding:0;
        }
        li{
            list-style: none;
        }
        .sel{
            width:500px;
            margin:200px auto;
            position: relative;
        }
        .sel input{
            width:496px;
            height:50px;
            outline: none;
            text-indent: 2em
        }
        .sel ul{
            width:500px;
            position: absolute;
            left:0;
            top:54px;
        }
        .sel li{
            height:50px;
            line-height: 50px;
            color:white;
            background: orange;
            margin-top:2px;
            text-indent: 2em
        }
        .icon{
            width:30px;
            height:25px;
            background: url(icon.png) no-repeat;
            background-position:0 -25px;
            position: absolute;
            right:20px;
            top:20px;
            transition:all 0.1s;
        }
        .toTop{
            background-position:0 0;
        }
    </style>

html

<div id="app">
        <div class="sel">
            <input type="text" v-model.trim="con">
            <ul v-show="flag">
                <li v-for="item in arr" @click="cl(item)">{{item}}</li>
            </ul>
            <div @click="toggle" :class="{icon:true,toTop:flag}"></div>
        </div>
</div>

js

var app=new Vue({
        el:"#app",
        data:{
            list:["苹果","西瓜","番茄"],
            flag:false,
            con:"",
        },
        computed:{
            arr:function(){
                var arr=this.list.filter(function(item,index){
                    if(item.indexOf(this.con)!=-1){
                        return item;
                    }
                },this);
                return arr;
            }
        },
        watch:{
            con:function(val){
                if(val){
                    this.flag=true;
                }else{
                    this.flag=false;
                }
            },
            arr:function(val){
                if(val.length==0){
                    this.flag=false;
                }
            }
        },
        methods:{
            toggle:function(){
                this.flag=!this.flag;
            },
            cl:function(item){
                this.con=item;
                var self=this;
                this.$nextTick(function(){
                    self.flag=false
                })
            }
        },
        mounted:function(){
            var self=this;
            document.addEventListener("click",function(e){
                e.stopPropagation();
                var target=e.target;
                if(target.parentNode.className!="sel"||target.parentNode==null){
                    self.flag=false;
                }
            })
        }
    })

如有问题欢迎交流，微信：weiwei260104