這篇文章跟大家分享一個(gè)小程式開發(fā)實(shí)戰(zhàn)，介紹一下在小程式中怎麼實(shí)現(xiàn)內(nèi)容搜尋功能，希望對(duì)大家有幫助！

前面我們實(shí)現(xiàn)了首頁(yè)內(nèi)容列表的展示，但是沒有對(duì)頂部的搜尋框進(jìn)行真正的功能實(shí)現(xiàn)，這篇我們來(lái)為搜尋框加上真正的搜尋功能。 【相關(guān)學(xué)習(xí)推薦：小程式開發(fā)教學(xué)】

搜尋內(nèi)容綁定

#先看看我們現(xiàn)在點(diǎn)選搜尋框後的樣子

#這裡，我們使用了vant的search元件，其文件 中介紹了一些列關(guān)於這個(gè)元件的事件綁定方法。

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

接著，我們?cè)谒褜な录幕貞?yīng)實(shí)作中列印綁定在搜尋元件上的值變量，然後進(jìn)行輸入測(cè)試。

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

這裡需要注意，在開發(fā)者工具中，對(duì)於輸入框這類元件，由於是在電腦端，所以無(wú)法喚起類似手機(jī)端的輸入法介面，所以互動(dòng)上與手機(jī)中使用小程式的真實(shí)情況所有差異。

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

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

調(diào)試

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

資料綁定

解決的方法也很簡(jiǎn)單，就是使用小程式自帶的資料綁定特性，將search元件中傳入的value屬性改為model:value，從而啟用資料雙向綁定。

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

條件查詢

那麼能夠拿到每次搜尋框輸入的內(nèi)容，我們就可以拿這個(gè)當(dāng)關(guān)鍵字，對(duì)清單內(nèi)容進(jìn)行查詢。

規(guī)則就是從資料庫(kù)中的所有記錄中尋找text中包含我們的搜尋關(guān)鍵字的記錄，當(dāng)然最多也只會(huì)一次回傳20筆記錄，然後同樣可以支援上拉載入.

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

我們將原本用於刷新整個(gè)清單內(nèi)容的方法增加了搜尋內(nèi)容作為參數(shù)，並透?jìng)鹘o用於真正查詢資料的雲(yún)端函數(shù)處理方法。同時(shí)，每次搜尋框確認(rèn)搜尋時(shí)，判斷是否有搜尋內(nèi)容，如果有則去進(jìn)行資料的重新取得。

資料庫(kù)記錄匹配

接著，我們?cè)陔?yún)端函數(shù)中對(duì)於資料庫(kù)資料的擷取也需做對(duì)應(yīng)的改動(dòng)，這裡會(huì)用到資料庫(kù)記錄的正規(guī)匹配方法來(lái)進(jìn)行對(duì)搜尋內(nèi)容的匹配，具體可參考官方文件

#改造後的核心邏輯如下

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)
}

我們根據(jù)是否有搜尋內(nèi)容，來(lái)區(qū)分是否要在查詢資料的過(guò)程中進(jìn)行正則匹配，並且在有搜尋內(nèi)容時(shí)忽略搜尋內(nèi)容的字母大小寫，以盡可能多的匹配到內(nèi)容。

搜尋結(jié)果

這樣，我們就實(shí)作了對(duì)於搜尋內(nèi)容的查詢。

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

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

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

很多頁(yè)面都有可能是數(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ù)庫(kù)中查找包含關(guān)鍵字的記錄進(jìn)行展示。另外，我們還將“沒有更多內(nèi)容”封裝可供復(fù)用的組件。

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

以上是手把手教你在小程式中實(shí)現(xiàn)內(nèi)容搜尋功能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！