小程序input联想输入，可输入多个侯选值

请先阅读上一篇小程序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: []
    })
  },
欢迎关注本人小程序：
小程序input联想输入，可输入多个侯选值

猜你喜欢
