【详细】小程序搜索功能实现

搜索功能是app，小程序中非常常见的一个需求，作为常见的需求，如何高效地完成该需求的实现，就异常关键。那么小程序中如何从0到1实现搜索功能呢？请看本文

效果展示

历史记录

跳转到详情页面（详情页面开发链接https://blog.csdn.net/m0_37218227/article/details/107297203 ）

 

搜索页wxml

<searchbar bindsearchinput="onSearchInputEvent"></searchbar>

<view class='history-list-group' wx:if="{
   
   {histories && !subjects}}">
  <view class='history-title'>
    <view class='title'>历史记录</view>
    <view class='clear' bindtap="onClearEvent">清除</view>
  </view>
  <navigator wx:for="{
   
   {histories}}" wx:key="{
   
   {item.id}}" url='/pages/detail/detail?type=movie&id={
   
   {item.id}}' class='history-group'>{
   
   {item.title}}</navigator>
</view>

<view class='item-list-group'>
  <view wx:for="{
   
   {subjects}}" class='item-group' wx:key="{
   
   {item.id}}" bindtap="onItemTapEvent" data-id="{
   
   {item.id}}" data-title="{
   
   {item.title}}">
    <image src='{
   
   {item.pic.normal}}' class='thumbnail'></image>
    <view class='info-group'>
      <view class='title'>{
   
   {item.title}}</view>
      <view class='rate-year'>{
   
   {item.rating.value}}分/{
   
   {item.year}}</view>
    </view>
  </view>
</view>

搜索页wxss

.item-list-group{
  padding: 10rpx 20rpx;
}

.item-list-group .item-group{
  padding: 10rpx 0;
  border-bottom: 1px solid #e4e4e4;
  display: flex;
}

.item-group .thumbnail{
  width: 80rpx;
  height: 100rpx;
  margin-right: 20rpx;
}

.item-group .info-group{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-group .title{
  font-size: 32rpx;
}

.info-group .rate-year{
  font-size: 28rpx;
  color: #7b7b7b;
}

.history-list-group{
  padding: 10rpx 20rpx;
}

.history-list-group .history-title{
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  background: #f9f9f9;
  font-size: 28rpx;
  color: #9e9e9e;
}

.history-list-group .history-group{
  font-size: 32rpx;
  padding: 20rpx 0;
  border-bottom: 1px solid #e4e4e4;
}

js文件

// pages/search/search.js
import {network} from "../../utils/network.js";

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.getStorage({
      key: 'searched',
      success: function(res) {
        var data = res.data;
        that.setData({
          histories: data
        })
      },
    })
  },

  onSearchInputEvent: function(event){
    var that = this;
    var value = event.detail.value;
    if(!value || value === ""){
      that.setData({
        subjects: null
      });
      return;
    }
    network.getSearch({
      q: value,
      success: function(subjects){
        that.setData({
          subjects: subjects
        })
      }
    })
  },

  onItemTapEvent: function(event){
    var that = this;
    var id = event.currentTarget.dataset.id;
    var title = event.currentTarget.dataset.title;
    var histories = that.data.histories;
    var isExisted = false;
    if(histories){
      for(var index=0;index<=histories.length;index++){
        var movie = histories[index];
        if(movie.id === id){
          isExisted = true;
          break;
        }
      }
    }
    if(!isExisted){
      if(!histories){
        histories = [];
      }
      histories.push({title:title,id:id});
      wx.setStorage({
        key: 'searched',
        data: histories,
        success: function () {
          console.log("保存成功！");
        }
      })
    }
    
    wx.navigateTo({
      url: "/pages/detail/detail?type=movie&id="+id,
    });
  },

  onClearEvent: function(event){
    wx.removeStorage({
      key: 'searched',
      success: function(res) {
        console.log("删除成功！");
      },
    });
    this.setData({
      histories: null
    });
  }
})