使用uni-ui 实现下拉搜索框(uniapp+uni-ui+vue3 开发微信小程序)

需求：输入框中输入内容-->远端搜索匹配的选项-->展示选项（可点击选择选项）

代码实现

htm:(一个输入框input + list)

<view class="search-select-box" >
	<uni-easyinput 
        v-model="searchCode" 
        placeholder="输入搜索"
		@input="onInput" 
        @change="onInput" 
        class="search-input"
    />
	<uni-list class="Dropdown" v-show="searchCode.length > 0">
		<uni-list-item 
           class="Dropdown-item" 
           v-for="(item,index) in state.codeList" :key="index" 
           clickable 
           @click="onCodeClick(item)"
        >
		    <template v-slot:body>
				{{item.text}}
			</template>
		</uni-list-item>
	</uni-list>
</view>

js:

let isInfoShow = ref(false)
let state = reactive({
	    codeList:[]
	})
let searchCode = ref('')
	// 输入搜索唯一编码
	const onCodeInput = async (val)=>{
		if(searchCode.value.length == 0){
			state.codeList = []
			return
		}
		const params = {
			code: val
		}
//调取后端接口获取 state.codeList
		const { data } = await GetUniqueCodeSearchList(params)
		if (data.success) {
			state.codeList = data.data
		} else {
			state.codeList = []
			uni.showToast({
				title: data.message,
				icon: 'none'
			})
		}
		
	}
// 选定唯一编码添加构件
	const onCodeClick = (item)=>{
		//根据不同业务
        console.log(item,'选定的值') 
		searchCode.value = ''
		state.codeList = []
	}

css

.search-select-box{
		position: relative;
		margin-top: 8rpx;
	}
	.Dropdown{
		position: absolute;
		top:78rpx;
		left: 0rpx;
		width:100%;
		height: 300rpx;
		overflow-y: auto;
	}
	.Dropdown-item{
		background-color: rgb(198, 198, 198);
		z-index: 1;
	}