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

先看看效果图

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

html

<!--pages/commodity/commodity-search/index.wxml-->
<!-- 自定义顶部导航 S -->
<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>
<!-- 自定义顶部导航 E -->
<view class="read-in" style="margin-top: {{navHeight}}px">
  <!-- 最近搜索 S -->
    <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>
      <!-- 最近搜索内容 S -->
      <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>
      <!-- 最近搜索内容 E -->
    </view>
    <!-- 最近搜索 E -->
    <!-- 热门搜索 S -->
    <view class="headline">
      <view class="head-headline">
        <view class="headline-size">搜索发现</view> 
      </view>
      <!-- 热门推荐内容 S -->
      <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>
      <!-- 热门推荐内容 E -->
    </view>
    <!-- 热门搜索 E -->
</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": {}
}

app.js 

App({
  globalData: {
    navHeight: 0,
    navTop: 0,
    windowHeight: 0
  },
  onLaunch: function (options) {
    var _this = this;
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: res => {
        //导航高度
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top,
          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
        this.globalData.navHeight = navHeight;
        this.globalData.navTop = navTop;        //navTop
        this.globalData.windowHeight = res.windowHeight;
      },
      fail(err) {
        console.log(err);
      },

    })
  },
})

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

微信搜索:       源空间

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