1. 自動(dòng)聯(lián)想的詞條數(shù)據(jù)獲取

在實(shí)際的小程序開發(fā)中摧冀，有這樣一種場景：我們預(yù)先選擇在哪個(gè)餐館吃飯凿掂，然后進(jìn)入當(dāng)前餐館的主頁面尝蠕，當(dāng)在input搜索框中輸入關(guān)鍵字時(shí)列肢，我們只會彈出當(dāng)前餐館才有的食材名稱血柳，而不是將整個(gè)市的餐廳所有食材都彈出來給用戶官册。
所以，針對上面這種情形混驰，有兩種解決方案：

• 靜態(tài)配置:

在小程序搜索頁面對應(yīng)的js文件中攀隔，我們將接收到的餐館名作為條件，依據(jù)餐館名獲取對應(yīng)的菜名列表栖榨，然后將菜名數(shù)組中的菜名與關(guān)鍵字匹配昆汹，彈出含有關(guān)鍵字的菜名數(shù)組。

• 動(dòng)態(tài)獲取聯(lián)想詞：

所謂動(dòng)態(tài)婴栽，就是在選擇了之后满粗，將餐廳名作為條件去數(shù)據(jù)庫查詢該餐廳中所包含的所有菜名，然后將所有菜名以json格式返回給小程序的js文件愚争，最后用關(guān)鍵字去匹配返回的菜名數(shù)組中的菜名映皆，再彈出包含關(guān)鍵字的菜名數(shù)組。

• 兩種解決方案的對比：

從數(shù)據(jù)庫動(dòng)態(tài)獲取聯(lián)想詞的好處轰枝，那就是可以滿足后期的菜品更迭捅彻，直接在數(shù)據(jù)庫更新菜品即可，在小程序中用戶也能實(shí)時(shí)地看到關(guān)鍵字的聯(lián)想詞鞍陨；
然而靜態(tài)的聯(lián)想詞后期菜品更迭時(shí)步淹，需要更新小程序源代碼，要重新上線更新小程序，時(shí)效性較差缭裆。

2. 通過關(guān)鍵字自動(dòng)聯(lián)想的原理及代碼實(shí)現(xiàn)

• index.wxml

<view>
  <input class="textinput" bindinput="bindinput" value="{{inputValue}}" placeholder="請輸入內(nèi)容" />
</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 = '';
// 當(dāng)聯(lián)想詞數(shù)量較多键闺，使列表高度超過340rpx，那設(shè)置style的height屬性為340rpx澈驼，小于340rpx的不設(shè)置height辛燥，由聯(lián)想詞列表自身填充
// 結(jié)合上面wxml的<scroll-view>
var arrayHeight = 0;

Page({
  data: {
    inputValue: '', //點(diǎn)擊結(jié)果項(xiàng)之后替換到文本框的值
    adapterSource: ["weixin", "wechat", "android", "Android", "IOS", "java", "javascript", "微信小程序", "微信公眾號", "微信開發(fā)者工具"], //本地匹配源
    bindSource: [], //綁定到頁面的數(shù)據(jù)，根據(jù)用戶輸入動(dòng)態(tài)變化
    hideScroll: true,
  },
  
  //當(dāng)鍵盤輸入時(shí)缝其，觸發(fā)input事件
  bindinput: function (e) {
    //用戶實(shí)時(shí)輸入值
    var prefix = e.detail.value
    //匹配的結(jié)果
    var newSource = []
    if (prefix != "") { 
      // 對于數(shù)組array進(jìn)行遍歷挎塌，功能函數(shù)中的參數(shù) `e`就是遍歷時(shí)的數(shù)組元素值。
      this.data.adapterSource.forEach(function (e) { 
        // 用戶輸入的字符串如果在數(shù)組中某個(gè)元素中出現(xiàn)氏淑，將該元素存到newSource中
        if (e.indexOf(prefix) != -1) {
          console.log(e);
          newSource.push(e)
        }
      })
    };
    // 如果匹配結(jié)果存在勃蜘，那么將其返回，相反則返回空數(shù)組
    if (newSource.length != 0) {
      this.setData({
        // 匹配結(jié)果存在假残，顯示自動(dòng)聯(lián)想詞下拉列表
        hideScroll: false,
        bindSource: newSource,
        arrayHeight: newSource.length * 71
      })
    } else {
      this.setData({
        // 匹配無結(jié)果缭贡，不現(xiàn)實(shí)下拉列表
        hideScroll: true,
        bindSource: []
      })
    }
  },

  // 用戶點(diǎn)擊選擇某個(gè)聯(lián)想字符串時(shí)，獲取該聯(lián)想詞辉懒，并清空提醒聯(lián)想詞數(shù)組
  itemtap: function (e) {
    this.setData({
      // .id在wxml中被賦值為{{item}}阳惹，即當(dāng)前遍歷的元素值
      inputValue: e.target.id,
      // 當(dāng)用戶選擇某個(gè)聯(lián)想詞，隱藏下拉列表
      hideScroll: true,
      bindSource: []
    })
  },
})

3. 通過nodejs從數(shù)據(jù)庫中實(shí)時(shí)獲取當(dāng)前餐館對應(yīng)的聯(lián)想詞數(shù)組

（待更新...）