实现效果如下:
样式注意点
1、下拉搜索框高度自适应,但是不能超过最大高度
height: auto;
max-height: 280px;
2、主要逻辑
当输入的时候,用e.detail.value拿到输入的值
新建一个空数组,也就是你页面组要渲染的搜索后的内容
循环原来数组的字段,当某一项输入的值与字段匹配上,也就是indexOf取值大于等于0时
把匹配上的那一项push到新数组中,然后渲染
inputTyping(e) {
let userInputValue = e.detail.value
if(userInputValue !=''){
if(e.detail.cursor){ //input焦点所在位置
let arr = []
for(let i =0; i < this.data.list1.length; i++){
if(this.data.list1[i].indexOf(userInputValue)>=0){
arr.push(this.data.list1[i])
}
this.setData({
scrollShow: true,
list1: arr
})
}
}
}
}