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从数据库中实时获取当前餐馆对应的联想词数组
（待更新...）
