Bootstrap

uniapp input 输入框加下拉框模糊查询

.
.
.
在这里插入图片描述
首先需要写一个输入框
然后给他绑定事件(根据自己实际需求来)
我这个输入框是搜索加下拉框选择,我用了三个事件绑定他
一个是键盘输入触发事件

在这里插入图片描述
还有就是聚焦和失去聚焦触发事件
在这里插入图片描述
在这里插入图片描述


<view class="navinput">
		<image :src="imgs" mode="" class="navlefts"></image>
		<input  type="text" class="input" v-model="clientname" @focus="datalist" @input="inputes" @blur="inputes" placeholder="搜索">
		<image :src="img" mode="" class="navimg" @click="scan"></image>
</view>

当键盘聚焦时显示下拉框并显示所有数据
接下来我们输入内容或者取消输入就会执行下面的方法


		this.company  总数据
		this.list     要展示的数据
		this.clientname 输入框的内容
		
		// 模糊搜索
			inputes(){
			//首先判断输入框是否为空
				if(this.clientname === ''){    
				//this.list是下拉框显示的内容,如果为空就展示全部数据
					this.list = this.company  
				//否则执行下面内容
				}else{
					//先清空展示的数据
					this.list = []
					//然后开始循环全部数据
					for(var i=0;i<this.company.length;i++){
						//判断数据里面是否有符合输入的内容  不符合返回-1 只需要大于或等于0就是符合
 							if(this.company[i].companyName.indexOf(this.clientname)>=0){
 							
									console.log(this.company[i].companyName)
									//然后把它丢进要展示的数组里面
									this.list.push(this.company[i])
									//我这里是必选项为防止用户不选择判断如有数据默认第一个
									if(this.list.length != 0){
									//在用户选择下拉框内容时会被替换掉 
										this.datasty.customerId =this.list[0].userId
										
									}
							}
					}
				}

以上就是全部内容,小白一个多多关照

;