版权声明:本文为博主原创文章,但知识无界。欢迎关注本人公众号&小程序:馨成 https://blog.csdn.net/haohaizijhz/article/details/89951466
请先阅读上一篇小程序input联想输入
//联想输入专用变量
var wayIndex = -1;
var school_area = '';
var grade = '';
// 当联想词数量较多,使列表高度超过340rpx,那设置style的height属性为340rpx,小于340rpx的不设置height,由联想词列表自身填充
// 结合上面wxml的<scroll-view>
var arrayHeight = 0;
/* 页面的初始数据
*/
data: {
inputValue: '', //点击结果项之后替换到文本框的值
adapterSource: ["weixin", "wechat", "android", "Android", "IOS", "java", "javascript", "微信小程序", "微信公众号", "微信开发者工具"], //本地匹配源
bindSource: [], //绑定到页面的数据,根据用户输入动态变化
hideScroll: true,
},
//自动联想输入
//当键盘输入时,触发input事件
bindinput: function (e) {
//用户实时输入值
var prefix = e.detail.value
var temp = prefix.split(",")
console.log(temp)
console.log(temp.length)
console.log(temp[temp.length-1])
prefix=temp.pop()
//匹配的结果
var newSource = []
if (prefix != "") {
// 对于数组array进行遍历,功能函数中的参数 `e`就是遍历时的数组元素值。
this.data.adapterSource.forEach(function (e) {
// 用户输入的字符串如果在数组中某个元素中出现,将该元素存到newSource中
if (e.indexOf(prefix) != -1) {
console.log(e);
newSource.push(e)
}
})
};
// 如果匹配结果存在,那么将其返回,相反则返回空数组
if (newSource.length != 0) {
this.setData({
// 匹配结果存在,显示自动联想词下拉列表
hideScroll: false,
bindSource: newSource,
arrayHeight: newSource.length * 71
})
} else {
this.setData({
// 匹配无结果,不现实下拉列表
hideScroll: true,
bindSource: []
})
}
},
// 用户点击选择某个联想字符串时,获取该联想词,并清空提醒联想词数组
itemtap: function (e) {
var originInputValue = this.data.inputValue
var realInputValue =''
if (originInputValue!=''){
realInputValue = originInputValue+","+e.target.id// .id在wxml中被赋值为{{item}},即当前遍历的元素值
}else{
realInputValue = e.target.id
}
this.setData({
inputValue: realInputValue,
// 当用户选择某个联想词,隐藏下拉列表
hideScroll: true,
bindSource: []
})
},
欢迎关注本人小程序: