微信小程序如何实现搜索功能

Bertha 。 2023-06-30 10:52 24阅读 0赞

1.  在页面`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>

1.  在逻辑文件`search.js`中，在`data`中存放`list`的数据，为空数组，存放搜索列表的数据，同时定义`staticData`，在里面定义`inputValue`，里面为空字符串，是`input`输入框的值，代码如下所示：

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

1.  在`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)
     })
    },

1.  在`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: []
          })
        }
    }

1.  在`search.js`中，定义`handleInputChange()`函数，这个函数也是`input`输入框绑定的函数，传入事件对象`e`，然后通过`e.detail.value`赋值给`staticData`的`inputValue`，代码如下所示：

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

1.  在`search.js`中，定义`handleSearch()`函数，这个函数也是之前搜索按钮所绑定的函数，在这个里面重新发起一次请求，携带`keyword`关键字发起请求，代码如下所示：

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

1.  如果想要点击在搜索以后显示的列表，可以在列表中绑定`handleItemTap()`事件，传入事件对象`e`，通过 `e.currentTaret.id`去获取到点击的`id`，然后再通过 `wx.navigateTo()`方法跳转到相应的详情页，代码如下所示：

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