uniapp drop-down box with search, select drop-down box to add search function, handwriting simple version

Damn products make me progress! ! ! ! !

I want to search for one that can be reused directly, but it is not very useful. . .

I hand-wrote a drop-down box (select) that can be searched in a simplified version of uniapp. Everyone has a different opinion. I will optimize it when I have time. Now one person is working on four projects at the same time. He is really being exploited. . .

         <!-- 手写一个能搜索的下拉框 -->
         <!-- 写出来基础框架，使用定位定位在了底部 -->

        <view class="showBoxInput" v-if="flagShow">
			<view class="showBoxInput-chi-sele" @click="flagShow = false;searchVillageVal = '';villageArray = villageArrayBackup">取消</view>
			<input :disabled="disableData" v-model="searchVillageVal" placeholder="请输入小区搜索" class="showBoxInput-chi" />
			<view class="showBoxInput-chi-sele" @click="searchVillage">搜索</view>
		</view>
		<view class="showBox" v-if="flagShow">
			<view class="showBoxItem" v-for="item in villageArray" @click="getItemData(item)">
				{
   
   {item.value}}
			</view>
		</view>

 Just make some styles and don’t write any animations. If you want to do it yourself, just optimize it yourself.

.showBox{
		position: absolute;
		bottom: 0px;
		width: 100%;
		height: 300px;
		padding-bottom: 40px;
		transition: all .3s;
		overflow: auto;
		background-color: #f1f2f3;
	}
	.showBoxItem{
		text-align: center;
		line-height: 40px;
		background-color: #f1f2f3;
		transition: all .3s;
	}
	.showBoxItem:hover{
		background-color: #f1f2f3;
	}
	.showBoxInput{
		width: 100%;
		position: absolute;
		bottom: 340px;
		border-radius: 10px;
		display: flex;
		background-color: #f1f2f3;
	}
	.showBoxInput-chi{
		padding-left: 20px;
		width: 70%;
		height: 40px;
		border-radius: 20px;
		background-color: #ffffff;
	}
	.showBoxInput-chi-sele{
		text-align: center;
		height: 40px;
		line-height: 40px;
		width: 15%;
		background-color: #f1f2f3;
	}

data() {
			return {
				// 备份一个小区，搜索清空的时候搜索还原
				villageArrayBackup:[],
                // 用来循环显示的小区
                villageArray: [],
                // 控制显示不显示的标识
				flagShow:false,
        }
}
methods:{
			getItemData(val){
				// 选择了小区以后让循环的数组再变成全量数组并给输入框置空
				this.detail.village = val.id
                // 这个是改变输入框地方的文本颜色
				this.villageColor = "#000000"
                // 关闭输入框
				this.flagShow = false
                // 重新让循环的数组变成全量数组
				this.villageArray = this.villageArrayBackup
                // 置空搜索位置的内容
				this.searchVillageVal = ''
			},
}