這篇文章跟大家分享一個小程式開發實戰，介紹一下在小程式中怎麼實現內容搜尋功能，希望對大家有幫助！
前面我們實現了首頁內容列表的展示，但是沒有對頂部的搜尋框進行真正的功能實現，這篇我們來為搜尋框加上真正的搜尋功能。 【相關學習推薦：小程式開發教學】
#先看看我們現在點選搜尋框後的樣子
#這裡，我們使用了vant的search元件，其文件 中介紹了一些列關於這個元件的事件綁定方法。
我們要使用到的是在確定搜尋時去觸發真正的內容搜索，所以我們為search元件增加這一事件的綁定如下
接著，我們在搜尋事件的回應實作中列印綁定在搜尋元件上的值變量，然後進行輸入測試。
handleSearch() {
const { searchValue } = this.data
console.log('搜索内容', searchValue)
}這裡需要注意，在開發者工具中，對於輸入框這類元件，由於是在電腦端，所以無法喚起類似手機端的輸入法介面，所以互動上與手機中使用小程式的真實情況所有差異。
對於這種情況，我們可以使用預覽功能在手機端進行調試，手機端打開小程式後可點擊右上角的...調出調試面板來查看控制台的輸出。
或使用開發者工具提供的真機調試功能，可以在手機預覽小程式的同時，在電腦端的開發者工具內即時看到偵錯資訊。
經過調試，我們發現，search#所綁定的value只會在第一次輸入後來改變並儲存在searchValue中，而後續再輸入的值並不會更新這個變量，這就導致我們不能每次搜尋都使用最新輸入的內容，這是有問題的。
解決的方法也很簡單，就是使用小程式自帶的資料綁定特性，將search元件中傳入的value屬性改為model:value，從而啟用資料雙向綁定。
這樣，在後續的輸入更新後，都會同時更新searchValue的值，達到同步修改的效果。
那麼能夠拿到每次搜尋框輸入的內容，我們就可以拿這個當關鍵字，對清單內容進行查詢。
規則就是從資料庫中的所有記錄中尋找text中包含我們的搜尋關鍵字的記錄，當然最多也只會一次回傳20筆記錄，然後同樣可以支援上拉載入.
其實這裡和之前查詢資料的方式基本上一致，只是在原有的基礎上增加一個關鍵字匹配條件，那麼讓我們來改造一下之前的資料查詢方法。
我們將原本用於刷新整個清單內容的方法增加了搜尋內容作為參數，並透傳給用於真正查詢資料的雲端函數處理方法。同時，每次搜尋框確認搜尋時，判斷是否有搜尋內容，如果有則去進行資料的重新取得。
接著，我們在雲端函數中對於資料庫資料的擷取也需做對應的改動，這裡會用到資料庫記錄的正規匹配方法來進行對搜尋內容的匹配，具體可參考官方文件
#改造後的核心邏輯如下
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)
}我們根據是否有搜尋內容，來區分是否要在查詢資料的過程中進行正則匹配，並且在有搜尋內容時忽略搜尋內容的字母大小寫，以盡可能多的匹配到內容。
這樣，我們就實作了對於搜尋內容的查詢。
最后，我们优化一下首页的展示效果。
很多页面都有可能是数据列表的形式，而其各自在加载完所有数据后需要展示在底部的“没有更多内容”字样可能不同，所以我们将这部分展示封装成一个可供复用的自定义组件。
<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;
}Component({
properties: {
text: {
type: String,
value: '没有更多内容了'
}
}
})这篇，我们实现了搜索框功能，将搜索框中输入的内容作为搜索关键字，从而在数据库中查找包含关键字的记录进行展示。另外，我们还将“没有更多内容”封装可供复用的组件。
更多编程相关知识，请访问：编程入门！！
以上是手把手教你在小程式中實現內容搜尋功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
