微信小程序实现搜索功能(搜索历史, 清空历史, 搜索发现等操作)

冷不防 2022-12-16 06:21 350阅读 0赞

先看看效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

比较简单,不做过多的解释了,直接看代码:

### html ###

<view class="navbar custom-class" style='height:{
       {navHeight}}px;'>
      <view class="navbar-action-wrap navbar-action-group row item-center" style='top:{
       {navTop}}px;'>
        <image style="width: 17.5px; height: 18px; padding-top: 3px;" src="{
       {leftIcon}}" catchtap="goBack"></image>
      </view>
      <view class='navbar-title' style='top:{
       {navTop}}px'>
        <view class="search-input">
          <span class="search-con">
            <view class="center-30f2b4d">
              
              <image class="icon" src="{
       {searchIcon}}" catchtap="searchbegin" data-postname="{
       {inputValue}}"></image>
              <input class="search-size" confirm-type="search" value="{
       {inputValue}}" type="text" bindinput="getInputValue" placeholder="搜索品牌或商品" placeholder-class="phcolor" bindconfirm="searchbegin" data-postname="{
       {inputValue}}"></input>
            </view>
          </span>
        </view>
      </view>
    </view>
    
    <view class="read-in" style="margin-top: {
       {navHeight}}px">
      
        <view class="headline" wx:if="{
       {historyStorage.length!=0}}" hidden="{
       {historyStorageShow?false:true}}">
          <view class="head-headline justify">
            <view class="headline-size">搜索历史</view>
            <view class="icon-right size" catchtap="remove"><image src="https://ico.dongtiyan.com/tu-129.png"></image></view>
          </view>
          
          <view class="lately-main">
            <view class="chunk" wx:for="{
       {historyStorage}}" wx:key="index" bindtap='searchbegin' data-index='{
       {index}}' data-postname="{
       {item}}">
              <text>{
       {item}}</text>
            </view>
          </view>
          
        </view>
        
        
        <view class="headline">
          <view class="head-headline">
            <view class="headline-size">搜索发现</view> 
          </view>
          
          <view class="lately-main">
            <view class="chunk" wx:for="{
       {hotsearch1}}" wx:key="index" catchtap="searchbegin" bindtap="getInputValue" data-postname="{
       {item.title}}">
              <text>{
       {item.title}}</text>
            </view>
          </view>
          
        </view>
        
    </view>
    
    
    
    <view class="searchresult" wx:if="{
       {inputValue != ''}}" hidden="{
       {searchresult}}" >
      <view class="result" wx:for="{
       {searchResult}}" catchtap="searchbegin" wx:key="index" bindtap="getInputValue" data-postname="{
       {item.result}}">
        <view>{
       {item.result}}</view>
        <image src="{
       {upperLeftArrow}}"></image>
      </view>
    </view>
    
    <view class="searchresult" wx:if="{
       {inputValue != ''}}" hidden="{
       {searchresult?false:true}}" >
      <view class="result" wx:for="{
       {searchResult}}" catchtap="searchbegin" wx:key="index" bindtap="getInputValue" data-postname="{
       {item.result}}">
        <view>{
       {item.result}}</view>
        <image src="{
       {upperLeftArrow}}"></image>
      </view>
    </view>

最后下面的搜索结果我没用,单独拉出来了一个页面做结果页,看自己需求改一下就好

### wxss ###

/* pages/commodity/commodity-search/index.wxss */
    page {
        background: white;
    }
    .navbar {
      width: 100%;
      overflow: hidden;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      flex-shrink: 0;
    }
    
    .navbar-title {
      width: 100%;
      box-sizing: border-box;
      padding-left: 40px;
      padding-right: 120px;
      height: 33px;
      line-height: 33px;
      position: fixed;
      left: 0;
      z-index: 10;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: flex;
      align-items: center;
    }
    
    .navbar-action-wrap {
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      left: 10px;
      z-index: 11;
      line-height: 1;
      padding-top: 4px;
      padding-bottom: 4px;
      position: fixed;
    }
    
    .navbar-action-group {
      border-radius: 20px;
      overflow: hidden;
    }
    
    .navbar-action_item {
      padding: 3px 0;
      color: #333;
    }
    
    .navbar-action-group .navbar-action_item {
      border-right: 1px solid #f0f0f0;
      padding: 3px 14px;
    }
    
    .icon-right image {
      width: 25rpx;
      height: 26rpx;
    }
    
    .navbar-action-group .last {
      border-right: none;
    }
    
    .navbar-title-size {
      font-size: 10px;
      margin-right: 20rpx;
      align-self: center;
      margin: 0 auto;
    }
    
    .navbar-title-size.active {
      color: red;
      border-bottom: 2px solid red;
    }
    
    .scroll-box {
      position: absolute;
      height: 100%;
    }
    
    .search-input {
      width: 100%;
      height: 28px;
      line-height: 28px;
      background: #f6f6f6;
      border-radius: 30rpx;
      /* margin-top: 2px; */
      font-size: 25rpx;
    }
    
    .search-con {
      display: flex;
      align-items: center;
    }
    .search-con .center-30f2b4d {
      height: 28px;
      line-height: 28px;
      flex: 1;
      display: flex;
      align-items: center;
    }
    .search-con .center-30f2b4d .icon {
      width: 15px;
      height: 15px;
      align-self: center;
      margin: 0 10px;
    }
    .search-con .center-30f2b4d .search-size {
      width: 70%; 
      font-size: 12px;
      font-family: "微软雅黑";
    }
    .phcolor {
      color: #999999;
    }
    /* nav E */
    /* 标题部分 */
    .read-in {
      padding: 0 40rpx;
    }
    .headline {
      padding-top: .5rem;
    }
    
    .head-headline {
      width: 100%;
      height: 45rpx;
      position: relative;
      display: flex;
      font-size: 28rpx;
      font-weight: bold;
      align-items: center;
      justify-content: space-between;
    }
    
    /* 内容部分 */
    .lately-main {
      margin-top: 20rpx;
      overflow: hidden; 
    }
    .lately-main .chunk {
      display: inline-block;
      font-size: 24rpx;
      line-height: 20rpx;
      padding: 10rpx 21rpx;
      background: #f5f5f5;
      margin-right: 20rpx;
      border: 1px solid #DCDCDC;
      border-radius: 18.5rpx;
      color: #666666;
      margin-bottom: 26rpx;
      /* float: left; */
    }
    
    .searchresult {
      margin-top: 20px; 
      position: absolute;
      top: 55px;
      left: 0;
      width: 100%;
      background: #fff;
    }
    .result {
      height: 50px;
      line-height: 50px;
      text-align: left;
      border-bottom: 1px solid #eee;
      padding: 0 30rpx;
      color: #333;
      font-family: "微软雅黑";
      font-size: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .result image {
      width: 50rpx;
      height: 50rpx;
    }

### js  核心代码 ###

// pages/commodity/commodity-search/index.js
    const App = getApp()
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        // 自定义顶部导航
        navHeight: App.globalData.navHeight,
        navTop: App.globalData.navTop,
        // 图标
        leftIcon: "https://ico.dongtiyan.com/tu-130.png",
        searchIcon: "https://ico.dongtiyan.com/tu-99.png",
        recommend: [ //热门推荐
          {
            title: "冰箱"
          },
          {
            title: "红魔手机"
          },
          {
            title: "洗衣机"
          },
          {
            title: "电视机"
          },
          {
            title: "冰箱 双门"
          },
          {
            title: "海尔洗衣机 滚筒"
          },
          {
            title: "手机自营"
          },
          {
            title: "小天鹅洗衣机全自动"
          },
          {
            title: "手机"
          },
          {
            title: "笔记本"
          }
        ],
        historyStorage: [],        //历史搜索
        historyStorageShow: false,
        hotsearch1: [{ title: "短裤" }, { title: "背带裙" }, { title: "牛仔裤男" }, { title: "运动 休闲男鞋" }, { title: "蕾丝连衣裙" }, { title: "电视" }, { title: "长裙" }, { title: "oppo" }, { title: "蓝牙耳机" }, { title: "女包" }, { title: "格力空调" }, { title: "魅族" }],
        inputValue: "",        //输入框输入的值
        replaceValue: "",     //替换输入框的值
        eye: true,        //显示隐藏
        searchresult: false,
        // searchResult: [{ result: "苹果手机" }, { result: "手机支架" }, { result: "手机自营" }, { result: "手机套" }, { result: "手机膜" }, { result: "手机卡" }, { result: "手机报" }, { result: "苹果手机壳" }, { result: "手机车载支架" }]//虚拟的查询结果
      },
      // 点击返回上一级
      goBack: function () {
        // let pages = getCurrentPages();      //获取小程序页面栈
        // let beforePage = pages[pages.length - 2];       //获取上个页面的实例对象
        // beforePage.setData({
        //   txt: "修改数据了"
        // })
        // beforePage.goUpdate();           //触发上个页面自定义的go_update()方法
        wx.navigateBack({
          delta: 1
        })
      },
      /**
       * 获取顶部固定高度
       */
      attached: function () {
        this.setData({
          navHeight: App.globalData.navHeight,
          navTop: App.globalData.navTop,
        })
      },
    
      /**
       * 热门搜索显示隐藏
       */
      reye: function () {
        this.setData({
          eye: !this.data.eye
        })
      },
    
      /**
       * 清除
       */
      remove: function () {
        var _this = this
        wx: wx.showModal({
          content: '确认清除所有历史记录?',
          success: function (res) {
            if (res.confirm) {
              wx: wx.removeStorage({
                key: 'historyStorage',
                success: function (res) {
                  _this.setData({
                    historyStorage: []
                  })
                  wx.setStorageSync("historyStorage", [])
                },
              })
            } else {
              console.log("点击取消")
            }
          },
        })
      },
    
    
      /**
       * 获取input的值
       */
      getInputValue(e) {
        // console.log("获取到了", e.currentTarget.dataset.value)
        // console.log("获取value值",e.detail)   // {value: "ff", cursor: 2}
        this.setData({
          inputValue: e.detail.value
        })
        // this.setData({
        //   searchresult: true,
        // })
      },
      /**
       * 点击搜索提交跳转并存储历史记录
       */
      searchbegin: function (e) {
        let _this = this
        var data = e.currentTarget.dataset;
        _this.data.replaceValue = e.currentTarget.dataset.postname
        // _this.data.replaceValue = 
        wx: wx.setStorage({
          key: 'historyStorage',
          data: _this.data.historyStorage.concat(_this.data.inputValue).reverse(),
          data: _this.data.historyStorage.concat(_this.data.replaceValue).reverse()
        })
        // console.log(_this.data.inputValue)
        // console.log(_this.data.historyStorage)
        // console.log(data['postname'])
        if (data['postname'] == '') {
          wx.showToast({
            title: '请先输入品牌或商品',
            icon: 'none'
          })
        } else {
          wx.redirectTo({
            url: '../../commodity/commodity-search-list/index?postName=' + data['postname'] + '&searchtype=' + _this.searchtype
          })
        }
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // 历史搜索
        let that = this;
        that.searchtype = options.searchtype;
        wx.getStorage({
          key: 'historyStorage',
          success: function (res) {
            // console.log(res.data)
            that.setData({
              historyStorageShow: true,
              historyStorage: res.data
            })
          }
        })
        this.setData({
          inputValue: options.inputValue
        })
        this.data.inputValue = options.inputValue
        // console.log(this.data.inputValue)
      },
      goUpdate: function () {
        this.onLoad()
        // console.log("我更新啦")
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

### json  自定义顶部导航配置custom ###

{
      "navigationStyle": "custom",
      "usingComponents": {}
    }

以上就是所有代码,直接拿过来用就好,

### 微信搜索:       Q生活小助手 ###

如果对你有帮助,那就关注一下博主的小程序吧,谢谢大家支持

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20221123/ab72d46490304be3a54e846eefb62d53.png