vue 带检索功能下拉数据组件代码

1、’组件演示图

2、父级代码

<Hselect :total='options' :val='userForm.orgId'  @text="getOrgId"></Hselect>

3、子组件代码

<template>
     <div class="select-group-open position-a top-8 width-max">
        <div class="input">
            <input type="text" v-model="filterText2" class="input-h34 pointer" readonly="readonly">
            <button class="button-ico zx-icon-down"></button>
        </div>
        <ul class="ul none js-ul">
            <li class="first">
                <input type="text" class="input-default input-h34" v-model="filterText" placeholder="请输入...">
            </li>
            <li class="second">
                <ul>
                    <template v-for="item in filterList">
                        <li class="item" v-text="item.name" @click="selectItem(item)"></li>
                    </template>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {   
                filterText:"",
                filterText2:"",
            }
        },
        props: ['total','val'],
         computed: {
            //下拉框带搜索功能列表
            filterList: function () {
                //this.filterValue();
                var filterText = this.filterText;
                var list = this.total;
                return list.filter(function (item) {
                    return item.name.toLowerCase().indexOf(filterText.toLowerCase()) != -1
                });
            },
        },
        watch: {
            /*userId() {
              this.$emit('text',this.checkedIds);
            },*/
            'val':'filterValue',
          },
        mounted:function(){
            var _this=this;
            $(function(){
                $(document).click(function(event){
                    $(".select-group-open .js-ul").hide();
                    $(".select-group-open").click(function(event){
                       $(".select-group-open .js-ul").hide();
                       $(this).find(".js-ul").show();
                       event.stopPropagation();
                    })
                    
                })
                
            })
        },
        methods:{
            selectItem(item){
                $(".select-group-open .js-ul").hide();
                event.stopPropagation();

                this.filterText2=item.name;
                this.$emit('text',item);
            },
            filterValue(){
                for(var i=0; i<this.total.length; i++){
                    if(this.total[i].id==this.val){
                        this.filterText2 = this.total[i].name;
                        return;
                    };
                }
                this.filterText2="";
            }
        }
    }
</script>
<style scoped>
    .select-group-open li.first{height: 53px;}
</style>

4、data数据