vue 移动端搜索功能（带历史搜索记录）

￡神魔★判官ぃ 2022-10-07 06:48 3阅读 0赞

实现效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70][]

实现的功能:  
1.点击搜索，把搜索的值存入本地记录，并展示  
2.搜索相同的值，要删除旧数据，把新数据放进数组首位  
3.清空历史记录

html代码：

<div class="searchinp">
          <span @click="back" class="totrain"></span>
          <div class="input_box">
            <img class="btn_img" src="../assets/search.png" alt="" />
            <input type="text" v-model="search_val"/>
          </div>
    
          <button @click="get_search">搜索</button>
        </div>
        <div class="history">
          <p class="note">
            <span>历史搜索</span>
            <button @click="empty">
              <van-icon class="icon" name="delete-o" />
              <span>清除记录</span>
            </button>
          </p>
          <ul v-if="historyList.length>0">
            <li
              v-for="(item, index) in historyList"
              :key="index"
              @click="goSearchDetail(item)"
            >
              {
       { item }}
            </li>
          </ul>
          <p v-else style="text-align:center;margin:0 auto;font-size:16px;margin-top:20px">
              暂无搜索记录
          </p>
        </div>

事件部分：

<script>
    export default {
      name: "Search",
      data() {
        return {
          search_val: "", //搜索的内容
          historyList: [], //历史搜索记录，存本地
        };
      },
      mounted() {
        //如果本地存储的数据historyList有值，直接赋值给data中的historyList
        if (JSON.parse(localStorage.getItem("historyList"))) {
          this.historyList = JSON.parse(localStorage.getItem("historyList"));
        }
      },
      methods: {
        // 搜索
        get_search() {
          if (this.search_val == "") {
            // this.$toast("请输入搜索内容");
            this.$notify({ type: "primary", message: "请输入搜索内容" });
            return false;
          } else {
            // 没有搜索记录，把搜索值push进数组首位，存入本地
            if (!this.historyList.includes(this.search_val)) {
              this.historyList.unshift(this.search_val);
              localStorage.setItem("historyList", JSON.stringify(this.historyList));
            } else {
              //有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
              let i = this.historyList.indexOf(this.search_val);
              this.historyList.splice(i, 1);
              this.historyList.unshift(this.search_val);
              localStorage.setItem("historyList", JSON.stringify(this.historyList));
            }
            //跳转到搜索结果页
            this.$router.push({
              path: "/home",      //home是列表页
              query: {
                keyword: this.search_val,
              },
            });
          }
        },
        //点击历史搜索，跳转搜索结果页
        goSearchDetail(title) {
          this.$router.push({
            path: "/home",
            query: {
              keyword:title,
            //   search_val: title,
            },
          });
        },
    
        //清空历史搜索记录
        empty() {
            this.$notify({ type: "success", message: "清空历史搜索成功" });
          localStorage.removeItem("historyList");
          this.historyList = [];
        },
      },
    };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70]: /images/20221005/9c5ca6a9b20b4602977e40253ad16fc0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关百度搜索框搜索时显示或者隐藏历史搜索记录

1.首先进入百度首页 ![ec62268a06780289e48bc08578e3e21d.png][] 2.找到设置下的搜索设置，如下图所示 ![watermark_t

以你之姓@/ 2023年09月30日 07:51/ 0 赞/ 85 阅读

相关 Vue前端实现搜索功能

[https://blog.csdn.net/weixin\_41655541/article/details/96133804][https_blog.csdn.net_we

本是古典何须时尚/ 2023年02月22日 05:06/ 0 赞/ 56 阅读

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

先看看效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

冷不防/ 2022年12月16日 06:21/ 0 赞/ 350 阅读

相关 vue仿移动端京东搜索历史自适应长度超两行折叠功能

1.根据文本自适应宽度 2.标签超出两行显示两行 3.展开收起箭头按钮永远置于末位，若只有两行则箭头按钮隐藏，若超出两行，将箭头符号置于第二行的末位效果如下图所示

朴灿烈づ我的快乐病毒、/ 2022年11月19日 07:45/ 0 赞/ 54 阅读

相关 vue 移动端搜索功能（带历史搜索记录）

实现效果如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

￡神魔★判官ぃ/ 2022年10月07日 06:48/ 0 赞/ 4 阅读

相关使用intent调用手机自带搜索功能搜索内容

Intent intent = new Intent(Intent.ACTION_WEB_SEARCH); intent.put

雨点打透心脏的1/2处/ 2022年07月13日 00:47/ 0 赞/ 188 阅读

相关记录-前端带搜索功能的选择空间

(function($) { $.getSelectorValue = function(target){ return $('xyt

小灰灰/ 2022年06月10日 14:07/ 0 赞/ 215 阅读

相关 vue实现搜索功能

> 前言：最近小编也是刚跳槽新的公司一个月，前端技术栈是vue+element也是市面上比较常用的框架之一了，同时也花费一点时间总结一下最近的坑，react转vue的一个过程确

Love The Way You Lie/ 2022年01月22日 06:01/ 0 赞/ 443 阅读

相关 vue 移动端键盘搜索事件监听

1、首先注意，input的type="search" <input @keypress="searchGoods" type="search" placeholder="

缺乏、安全感/ 2021年09月19日 15:16/ 0 赞/ 538 阅读

相关 Vue搜索功能

Vue搜索功能知识点：v-model数据双向绑定，绑定对象是input @keyup="seachup()"是键盘事件菜单列表显示搜索效果图1： ![在这

拼搏现实的明天。/ 2021年09月18日 19:40/ 0 赞/ 495 阅读