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

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

搜索內(nèi)容綁定

先看看我們現(xiàn)在點(diǎn)擊搜索框后的樣子

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

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

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

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

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

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

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

調(diào)試

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

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

解決的方法也很簡(jiǎn)單，就是使用小程序自帶的數(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ù)庫(kù)中的所有記錄中查找text中包含我們的搜索關(guān)鍵字的記錄，當(dāng)然最多也只會(huì)一次返回20條記錄，然后同樣可以支持上拉加載。

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

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

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

接著，我們?cè)谠坪瘮?shù)中對(duì)于數(shù)據(jù)庫(kù)數(shù)據(jù)的提取也需做相應(yīng)的改動(dòng)，這里會(huì)用到數(shù)據(jù)庫(kù)記錄的正則匹配方法來(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ū)分是否要在查詢數(shù)據(jù)的過(guò)程中進(jìn)行正則匹配，并且在有搜索內(nèi)容時(shí)忽略搜索內(nèi)容的字母大小寫，以盡可能多的匹配到內(nèi)容。

搜索結(jié)果

這樣，我們就實(shí)現(xiàn)了對(duì)于搜索內(nèi)容的查詢。

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

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

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

很多頁(yè)面都有可能是數(shù)據(jù)列表的形式，而其各自在加載完所有數(shù)據(jù)后需要展示在底部的“沒(méi)有