手把手教你在小程式中實現內容搜尋功能

這篇文章跟大家分享一個小程式開發實戰，介紹一下在小程式中怎麼實現內容搜尋功能，希望對大家有幫助！

前面我們實現了首頁內容列表的展示，但是沒有對頂部的搜尋框進行真正的功能實現，這篇我們來為搜尋框加上真正的搜尋功能。 【相關學習推薦：小程式開發教學】

搜尋內容綁定

#先看看我們現在點選搜尋框後的樣子

#這裡，我們使用了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中文網其他相關文章！