小程序实现搜索历史记录,去重搜索字段以及限制展示字段数量

简介: 小程序实现搜索历史记录,去重搜索字段以及限制展示字段数量
<view class="search-left">
      <view class="search-icon"></view>
      <input 
          class="search-input" 
          bindinput="bindKeyInput" 
          bindconfirm="OnSearch" 
          type="text" 
          value="{{content}}"
          placeholder="输入内容或关键词"
        />
        <block wx:if="{{isInputText}}">
          <view class="search-close" catchtap="inputClose">
              <text>x</text>
          </view>
        </block>
      
  </view>
  <view class="search-right" bindtap="OnSearch">
      <text>搜索</text>
  </view>
点击搜索逻辑功能首先获取搜索的记录数组,搜索历史需要展示几个,对于重复的搜索字段不再存储

OnSearch() {
  let searchRecord = o.data.searchRecord //获取搜索存储的数据
  let content = this.data.content; //input的value值
  if (content != '') {
    if (searchRecord.length <= 5) {
      // 判断数组中是否已存在
      var newArr = searchRecord.findIndex (item =>{
          return item.title === this.data.content;
      });
      if (newArr != -1) {
          // 删除已存在后重新插入至数组
          searchRecord.splice(newArr, 1)
          searchRecord.unshift({ title:e })
      } else {
          searchRecord.unshift({ title:e })
        }
    }  else if (searchRecord.length == 0){
        searchRecord.unshift({ title:e })
    } else {
        console.log(searchRecord,'searchRecordsearchRecord')
        searchRecord.pop()//删掉旧的时间最早的第一条
        searchRecord.unshift({ title:e })
    }

    wx.setStorageSync('historyList', searchRecord)
    o.getHistorySearch() 
  } else {
    wx.showModal({
        title: "提示",
        content: "请输入要搜索的关键词"
    });
  }
  
}
获取存储的历史记录,在onLoad生命周期调用
  getHistorySearch() {
      this.setData({
        searchRecord: wx.getStorageSync('historyList') || [] //若无存储则为空
      })
  },
清除历史记录
  hisDel(){
        wx.clearStorageSync('historyList')
        this.setData({
            searchRecord: []
        })
    },
点击搜索的字段,再次搜索,获取点击的是哪个字段,传递过去,重新调用 OnSearch方法
  historyClick(e){
        let name = e.currentTarget.dataset.item.title
        if (name) {
            this.setData({
                content:name
            })
            this.OnSearch()
        }
    },
目录
相关文章
|
6月前
|
小程序
揭秘会员卡包和搜索直达新能力,让用户更快找到你的小程序
揭秘会员卡包和搜索直达新能力,让用户更快找到你的小程序
170 11
|
6月前
|
小程序 物联网 程序员
【社区每周】“小程序商品”能力接口字段更新(10.23-10.29)
【社区每周】“小程序商品”能力接口字段更新(10.23-10.29)
71 10
|
6月前
|
小程序
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
|
6月前
|
移动开发 小程序 IDE
【社区每周】小程序搜索直达能力全面开放;IDE3.0稳定版正式发布(2022年6月第二期)
【社区每周】小程序搜索直达能力全面开放;IDE3.0稳定版正式发布(2022年6月第二期)
52 0
|
SQL 小程序 JavaScript
【易售小程序项目】小程序首页(展示商品、商品搜索、商品分类搜索)【后端基于若依管理系统开发】
【易售小程序项目】小程序首页(展示商品、商品搜索、商品分类搜索)【后端基于若依管理系统开发】
57 0
|
11天前
|
小程序 机器人 开发者
QQ 小程序已发布,但无法被搜索的解决方案
我的 QQ 小程序在 2024 年 8 月就已经审核通过,上架后却一直无法被搜索到。打开后,再在 QQ 上下拉查看 “最近使用”,发现他出现一下又马上消失。
26 2
|
11月前
|
JSON 小程序 JavaScript
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的文献搜索系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的文献搜索系统附带文章和源代码部署视频讲解等
44 7
基于ssm+vue.js+uniapp小程序的文献搜索系统附带文章和源代码部署视频讲解等
|
4月前
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
116 0
|
6月前
|
小程序 前端开发 数据库
【微信小程序2】云数据库:利用addField在返回记录中增加新字段
【微信小程序2】云数据库:利用addField在返回记录中增加新字段
116 4