微信小程序input输入框关键字自动联想

1. 自动联想的词条数据获取

在实际的小程序开发中，有这样一种场景：我们预先选择在哪个餐馆吃饭，然后进入当前餐馆的主页面，当在input搜索框中输入关键字时，我们只会弹出当前餐馆才有的食材名称，而不是将整个市的餐厅所有食材都弹出来给用户。
所以，针对上面这种情形，有两种解决方案：

• 静态配置:

在小程序搜索页面对应的js文件中，我们将接收到的餐馆名作为条件，依据餐馆名获取对应的菜名列表，然后将菜名数组中的菜名与关键字匹配，弹出含有关键字的菜名数组。

• 动态获取联想词：

所谓动态，就是在选择了之后，将餐厅名作为条件去数据库查询该餐厅中所包含的所有菜名，然后将所有菜名以json格式返回给小程序的js文件，最后用关键字去匹配返回的菜名数组中的菜名，再弹出包含关键字的菜名数组。

• 两种解决方案的对比：

从数据库动态获取联想词的好处，那就是可以满足后期的菜品更迭，直接在数据库更新菜品即可，在小程序中用户也能实时地看到关键字的联想词；
然而静态的联想词后期菜品更迭时，需要更新小程序源代码，要重新上线更新小程序，时效性较差。

2. 通过关键字自动联想的原理及代码实现

• index.wxml

<view>
  <input class="textinput" bindinput="bindinput" value="{{inputValue}}" placeholder="请输入内容" />
</view>
<scroll-view scroll-y="true" class="scrollview" hidden="{{hideScroll}}" style="{{arrayHeight>340?'height:340rpx':''}}">
  <view wx:for="{{bindSource}}">
    <view id="{{item}}" bindtap="itemtap" class="itemview">{{item}}</view>
  </view>
</scroll-view>

• index.js

//index.js

var wayIndex = -1;
var school_area = '';
var grade = '';
// 当联想词数量较多，使列表高度超过340rpx，那设置style的height属性为340rpx，小于340rpx的不设置height，由联想词列表自身填充
// 结合上面wxml的<scroll-view>
var arrayHeight = 0;

Page({
  data: {
    inputValue: '', //点击结果项之后替换到文本框的值
    adapterSource: ["weixin", "wechat", "android", "Android", "IOS", "java", "javascript", "微信小程序", "微信公众号", "微信开发者工具"], //本地匹配源
    bindSource: [], //绑定到页面的数据，根据用户输入动态变化
    hideScroll: true,
  },
  
  //当键盘输入时，触发input事件
  bindinput: function (e) {
    //用户实时输入值
    var prefix = e.detail.value
    //匹配的结果
    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) {
    this.setData({
      // .id在wxml中被赋值为{{item}}，即当前遍历的元素值
      inputValue: e.target.id,
      // 当用户选择某个联想词，隐藏下拉列表
      hideScroll: true,
      bindSource: []
    })
  },
})

3. 通过nodejs从数据库中实时获取当前餐馆对应的联想词数组

（待更新...）