类似element中select 框带搜索功能（前端实现搜索）

uniapp也是第一次接触，效果图：

上代码：

<template>  
    <u-form-item label="所属城市" label-width="60px">  
        <u-input v-model="region.name"  
            ref="searchInp"  
            @input="filterRegion"  
            @blur="hideSearch"  
            @click="flag = true"/>  
        <view class="popup" v-show="flag" >  
            <view class="sanjiao"></view>  
            <view class="search" v-if="searchVal.length > 0">  
                <u-loading class="search-loading" mode="circle" :show="search_loading"></u-loading>  
                <text class="o-li"  
                @click="handleRegion(item)"  
                v-for="item in searchVal"  
                >{{ item.region_name }}</text>  
            </view>  
            <view class="not-data" v-else>--无匹配数据--</view>  
        </view>  
    </u-form-item>  

</template>  

<script>  
export default {  
    data() {  
        return {  
            flag: false,  
            search_loading: false,  
            searchVal: [],  
            region: {  
                name: '',  
                id: ''  
            },  
            list:[  
                {region_name: '池州', region_id: 10001},  
                {region_name: '惠州', region_id: 10001},  
                {region_name: '徽州', region_id: 10001},  
                {region_name: '凉州', region_id: 10001},  
                {region_name: '常州', region_id: 10001},  
                {region_name: '苏州', region_id: 10001},  
                {region_name: '京州', region_id: 10001},  
                {region_name: '永州', region_id: 10001}  
            ]  
        }  
    },  
    props: {  

    },  
    created() {  
        this.searchVal = this.list;  
    },  
    methods:{  
        handleRegion(item) {  
            this.region.name = item.region_name;  
            this.region.id = item.region_id;  
            this.flag = false;  
            this.$emit("getRegion", this.region);  
        },  
        hideSearch() {  
            setTimeout(() => {  
                this.flag = false;  
            },300)  
        },  
        filterRegion() {  

            let ziduan = this.region.name;  
            let rows = [];  
            this.search_loading = true;  
            rows = this.list.filter(item => {  
                if(item.region_name.indexOf(ziduan) != -1){  
                    return item  
                }  
            })  

            if(ziduan.length > 0 ){  
                this.searchVal = rows;  
                this.search_loading = false;  
            }else{  
                this.searchVal = this.list;  
                this.search_loading = false;  
            }  

        }  
    }  
}  
</script>  

<style lang="scss">  
.popup{  
    padding: 8px 0;  
    position: absolute;  
    top: 10vh;  
    z-index: 99;  
    transition: all 1s ease-in;  

    .sanjiao{  
        display: block;  
        width: 8px;  
        height: 8px;  
        background-color: #fff;  
        position: absolute;  
        top: -4px;  
        left: 30px;  
        transform: rotate(45deg);  

    }  
    .not-data{  
        width: 80vw;  
        border-radius: 5px;  
        line-height: 60rpx;  
        text-align: center;  
        background-color: #fff;  
        margin-top: -8px;  
        box-shadow: 0 -2px 12px 0 rgba(0,0,0,.1);  
        color: #666;  
        font-size: 24rpx;  
    }  
    .search{  
        width: 80vw;  
        max-height: 50vh;  
        overflow: hidden;  
        overflow-y: auto;  
        background-color: #fff;  
        border-radius: 5px;  
        margin-top: -8px;  
        box-shadow: 0 -2px 12px 0 rgba(0,0,0,.1);  
        .o-li{  
            display: block;  
            line-height: 60rpx;  
            padding: 0 5px;  
            &:after{  
                content: "";  
                display: block;  
                width: 100%;  
                height: 1px;  
                background-color: #eee;  
                transform: scaleY(0.5);  
            }  
        }  
        .search-loading{  
            position: absolute;  
            top: 50%;  
            left: 50%;  
            transform: translate(-50%, -50%);  
        }  
    }  
}  
</style>  

注意项： 如果要写成组件，在小程序中是不支持props中的值直接修改的，处理办法是 直接在组件内部增加一个对象，来替换props的值；