在頁面search.wxml中，定義一個input輸入框以及搜尋的點選按鈕，分別為它們繫結點選事件handleInputChange()和handleSearch()的事件，同時在它們的下面定義搜尋的列表，程式碼如下所示：

<view class="search-header">
 <input class="search-input" bindtap="handleInputChange" />
 <view class="search-btn" bindtap="handleSearch">搜尋</view>
</view>

<view>
 <view wx:for="{{list}}" wx:key="{{index}}" class="item" id="{{item.id}}" bindtap="handleItemTap">
 <view>{{ item }}</view>
 <view class="item-message">{{ item.message }}</view>
 </view>
</view>

在邏輯檔案search.js中，在data中存放list的資料，為空陣列，存放搜尋列表的資料，同時定義staticData，在裡面定義inputValue，裡面為空字串，是input輸入框的值，程式碼如下所示：

data: {
 list: []
},staticData: {
 inputValue: ""
}

在search.js的onLoad()生命週期函式中，呼叫請求資料的函式getSearchResult()，這樣在一進入頁面的時候就會獲取到所有的資料，不過由於並沒有關鍵字keyword，需要傳空字串，程式碼如下所示：

onLoad() {
 this.getSearchResult("");
 },getSearchResult(keyword) {
 wx.request({
  url: 'xxxxxx',data: {
  keyword: this.staticData.inputValue
  },method: "POST",header: {
  'content-type': 'application/x-www-form-urlencoded' 
  },success: this.getSearchResultSucc.bind(this)
 })
},

在search.js中，定義一個響應成功後的函式getSearchResultSucc()，判斷響應的資料是否存在。如果存在通過this.setData()方法將響應後的資料賦值給list，如果不存在，list仍然為空陣列，程式碼如下所示：

getSearchResultSucc(res) {
 // console.log(res)
 if (res.data.ret) {
  const result = res.data.data;
  this.setData({
  list: result
  })
 } else {
  this.setData({
  list: []
  })
 }
}

在search.js中，定義handleInputChange()函式，這個函式也是input輸入框繫結的函式，傳入事件物件e，然後通過e.detail.value賦值給staticData的inputValue，程式碼如下所示：

handleInputChange(e) {
 this.staticData.inputValue = e.detail.value;
}

在search.js中，定義handleSearch()函式，這個函式也是之前搜尋按鈕所繫結的函式，在這個裡面重新發起一次請求，攜帶keyword關鍵字發起請求，程式碼如下所示：

handleSearch (keyword) {
 this.getSearchResult(keyword)
}

如果想要點選在搜尋以後顯示的列表，可以在列表中繫結handleItemTap()事件，傳入事件物件e，通過 e.currentTaret.id去獲取到點選的id，然後再通過 wx.navigateTo()方法跳轉到相應的詳情頁，程式碼如下所示：

handleItemTap(e) {
 wx.navigateTo({
  url: '/pages/detail/detail?id=' + e.currentTaret.id
 })
}

知識點補充：微信小程式雲開發模糊查詢功能實現

//連線資料庫
const db = wx.cloud.database()
var that = this
db.collection(‘newsname').where({
//使用正則查詢，實現對搜尋的模糊查詢
_name: db.RegExp({
regexp: value,//從搜尋欄中獲取的value作為規則進行匹配。
options: ‘i',//大小寫不區分
})
}).get({
success: res => {
console.log(res)
that.setData({
search_list: res.data
})
}
})

總結

到此這篇關於微信小程式實現搜尋功能的文章就介紹到這了,更多相關微信小程式搜尋功能內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！