我們要使用到的是在確定搜索時(shí)去觸發(fā)真正的內(nèi)容搜索，所以我們?yōu)?code>search組件增加這一事件的綁定如下

接著，我們?cè)谒阉魇录捻憫?yīng)實(shí)現(xiàn)中打印綁定在搜索組件上的值變量，然后進(jìn)行輸入測試。

handleSearch() {
    const { searchValue } = this.data
    console.log('搜索內(nèi)容', searchValue)
}

這里需要注意，在開發(fā)者工具中，對(duì)于輸入框這類組件，由于是在電腦端，所以無法喚起類似手機(jī)端的輸入法界面，所以交互上與手機(jī)中使用小程序的真實(shí)情況所有差別。

對(duì)于這種情況，我們可以使用預(yù)覽功能在手機(jī)端進(jìn)行調(diào)試，手機(jī)端打開小程序后可點(diǎn)擊右上角的...調(diào)出調(diào)試面板來查看控制臺(tái)的輸出。

或者使用開發(fā)者工具提供的真機(jī)調(diào)試功能，可以在手機(jī)預(yù)覽小程序的同時(shí)，在電腦端的開發(fā)者工具內(nèi)實(shí)時(shí)看到調(diào)試信息。

調(diào)試

經(jīng)過調(diào)試，我們發(fā)現(xiàn)，search所綁定的value只會(huì)在第一次輸入后改變并存儲(chǔ)在searchValue中，而后續(xù)再輸入的值并不會(huì)更新這個(gè)變量，這就導(dǎo)致我們不能每次搜索都使用最新輸入的內(nèi)容，這是存在問題的。

數(shù)據(jù)綁定

解決的方法也很簡單，就是使用小程序自帶的數(shù)據(jù)綁定特性，將search組件中傳入的value屬性改為model:value，從而啟用數(shù)據(jù)雙向綁定。

這樣，在后續(xù)的輸入更新后，都會(huì)同時(shí)更新searchValue的值，達(dá)到同步修改的效果。

條件查詢

那么能夠拿到每次搜索框輸入的內(nèi)容，我們就可以拿這個(gè)作為關(guān)鍵字，對(duì)列表內(nèi)容進(jìn)行查詢。

規(guī)則就是從數(shù)據(jù)庫中的所有記錄中查找text中包含我們的搜索關(guān)鍵字的記錄，當(dāng)然最多也只會(huì)一次返回20條記錄，然后同樣可以支持上拉加載。

其實(shí)這里和之前查詢數(shù)據(jù)的方式基本一致，只是在原有的基礎(chǔ)上增加一個(gè)關(guān)鍵字匹配條件，那么讓我們來改造一下之前的數(shù)據(jù)查詢方法。

我們將原本用于刷新整個(gè)列表內(nèi)容的方法增加了搜索內(nèi)容作為參數(shù)，并透傳給用于真正查詢數(shù)據(jù)的云函數(shù)處理方法。同時(shí)，在每次搜索框確認(rèn)搜索時(shí)，判斷是否有搜索內(nèi)容，如果有則去進(jìn)行數(shù)據(jù)的重新獲取。

數(shù)據(jù)庫記錄匹配

接著，我們?cè)谠坪瘮?shù)中對(duì)于數(shù)據(jù)庫數(shù)據(jù)的提取也需做相應(yīng)的改動(dòng)，這里會(huì)用到數(shù)據(jù)庫記錄的正則匹配??? ? ?? ?? ???? ?? ?? ???? ?????. ??? ??.

us ??? ???? ?? ?? ??? ??? ? ?? ??? ??? ????? ???? ??? ?? ? ???? ???? search ?? ??? ?????

???? ??? ??? ???? ?????. ?? ??? ?? ??? ? ??? ??? ?? ?? ???? ?????.

const db = cloud.database()
const collection = db.collection('homeContentList')

let searchPromise
let countPromise

try {
  if (content) {
    const searchReg = db.RegExp({
      regexp: content,
      options: 'i'
    })
    searchPromise = collection.where({
      text: searchReg
    })
    .skip(pageNo).limit(pageSize).get()
    countPromise = collection.where({
      text: searchReg
    })
    .count()
  } else {
    searchPromise = collection.skip(pageNo).limit(pageSize).get()
    countPromise = collection.count()
  }
  const [{ data: listData }, { total }] = await Promise.all([searchPromise, countPromise])
  if (listData) {
    data = listData
  }
  totalSize = total
} catch (error) {
  console.log('error', error)
}

??? ???? ? ?? ??? ???? ?? ??? ?? ?? ??? ?? ??? ?? ?? ??? ??? ?? ??? ?? ?? ?????? ??? ? ???? ?? ??? ??? ????. ????? ?? ????? ???? ?? ??.

? ?? ???? ??? ???? ????? ???? ? ????. ????? ?? ????? ? ? ??? ??? ...? ???? ??? ? ????. ??? ??? ??? ??? ??? ?????.

Debugging????????? ? search? ???? ?? ? ???? ????? ?? ??????. time ?? ??? searchValue? ???? ????, ??? ??? ?? ? ??? ?????? ????. ?, ??? ??? ?? ?? ??? ??? ? ??? ?? ?????. ??

????? ??????????? ??? ?? ?????. ?, ?? ????? ??? ??? ??? ??? ???? ??<? ???? ???. /code> ???? ??? <code>value ??? model:value? ???? ??? ??? ???? ??????. ?????? ???? ?? ?? ???? ?? searchValue ?? ??? ?????? ?? ?? ??? ?? ? ????. ??????

??? ?????? ??? ???? ?? ???? ??? ?? ? ??, ?? ???? ???? ?? ??? ??? ? ????. ??????????? ?? ??? ??? ?? ???? ??? ???? text? ?? ?? ?????. ?? ? ?? 20?? ???? ???? ?? ??? ?????. ?????. ??????? ???? ??? ????? ?? ??? ?? ??? ?????, ????? ??? ?? ??? ???? ????. ??? ?? ??? ?? ??? ??? ?????. ????????us ?? ?? ?? ??? ?? ??? ? ??? ??? ?? ??? ????? ???? ??? ???? ???? ? ???? ???? ?? ?? ??? ???? ?????. ???, ????? ??? ??? ??? ?? ??? ??? ????, ??? ?? ???? ?? ????. ??

???????? ??? ????????????, ???? ???? ?????? ??? ???? ?? ??? ???? ???. ?????? ???? ???? ??? ????. ???? Match ??? ???? ?? ??? ??????. ??? ??? ???? ????????? ?????. ?? ?? ?? ??? ??? ??????

<view class="wrap">
  <text class="text">{{text}}</text>
</view>

???? ???? ??? ?????. ?? ??? ??? ??? ?? ???? ???? ??? ???, ?? ??? ?? ???? ?? ??? ????? ???? ??? ?? ??? ??????. ???????? ???????????????? ???? ?? ??? ??? ? ????. ??

內(nèi)容頁面優(yōu)化

最后，我們優(yōu)化一下首頁的展示效果。

無數(shù)據(jù)組件

很多頁面都有可能是數(shù)據(jù)列表的形式，而其各自在加載完所有數(shù)據(jù)后需要展示在底部的“沒有更多內(nèi)容”字樣可能不同，所以我們將這部分展示封裝成一個(gè)可供復(fù)用的自定義組件。

試圖部分

<view class="wrap">
  <text class="text">{{text}}</text>
</view>

組件樣式

.wrap {
  width: 100%;
  padding: 20rpx 0 40rpx;
  text-align: center;
}
.text {
  color: #999;
  font-size: 26rpx;
  line-height: 30rpx;
}

組件參數(shù)

Component({
  properties: {
    text: {
      type: String,
      value: '沒有更多內(nèi)容了'
    }
  }
})

展示效果

總結(jié)

這篇，我們實(shí)現(xiàn)了搜索框功能，將搜索框中輸入的內(nèi)容作為搜索關(guān)鍵字，從而在數(shù)據(jù)庫中查找包含關(guān)鍵字的記錄進(jìn)行展示。另外，我們還將“沒有更多內(nèi)容”封裝可供復(fù)用的組件。

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程入門！！

? ??? ?? ?????? ??? ?? ??? ???? ??? ???? ???????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!