使用JS location实现搜索框历史记录功能


Posted in Javascript onDecember 23, 2019

首先,来看下效果图(样式什么的就不必吐槽了哈)

使用JS location实现搜索框历史记录功能

html代码

<form id="hisform">
  <div id="searchbox">
    <input id="inpt" type="text" autocomplete="off" />
    <input id="btn" type="button" value="搜索" />
    <div id="historybox">
      <h3>搜索记录:</h3>
      //用于保存记录信息
      <ul id="list">
      </ul>
    </div>
  </div>
</form>

css代码

* {
   margin: 0;
   padding: 0;
 }
 input {
   border: 0;
   vertical-align: middle;
   float: left;
 }
 #searchbox {
   width: 300px;
   height: 50px;
   background: #fff;
   margin: 100px auto;
   border: 1px solid #ccc;
   position: relative;
 }
 #inpt {
   width: 240px;
   height: 50px;
   outline: none;
   text-indent: 10px;
 }
 #btn {
   width: 60px;
   height: 50px;
   cursor: pointer;
 }
 /* 历史记录框 */
 #historybox {
   width: 280px;
   padding: 10px 10px 50px;
   border: 1px solid #ccc;
   position: absolute;
   top: 50px;
   left: -1px;
   /* 隐藏 */
   display: none;
 }
 #historybox h3 {
   margin-bottom: 10px;
 }
 #list {
   list-style: none;
 }
 #list .on {
   float: left;
   border: 1px solid #ccc;
   background: #aaa;
   height: 30px;
   line-height: 30px;
   margin: 0 2px;
   border: 1px solid #ccc;
   border-radius: 5px;
 }
 #list .active {
   color: #fff;
   text-decoration: none;
   padding: 2px;
 }

js代码(这里需引入jQuery)

$(function () {
  let max_history = 7;// 存储最大历史数据
  // 鼠标移入事件
  $('#inpt').on('focus', function () {
    $('inpt').val = '';
    let data = localStorage.getItem('data'); //从本地存储中读取数据
    if (!data) {
      $('#historybox').css('display', 'none');
    } else {
      $('#historybox').css('display', 'block');
      historydata(JSON.parse(data)); // 渲染数据
    }
  })
  // 鼠标移出事件
  $('#inpt').on('blur', function () {
    $('#historybox').css('display', 'none');
    init_history();// 初始化历史记录,清空记录
  })
  //点击搜索按钮时,将搜索内容添加到本地存储
  $('#btn').on('click', function () {
    var search = inpt.value;
    var data = localStorage.getItem('data'); //从本地存储中读取数据
    if (data) {
      var arr = JSON.parse(data); //如果有数据则转换成对象或数组
    } else {
      var arr = []; //如果没有数据,则新增一条
    }
    arr.push(search);
    removalDuplicate(arr);// 对用户输入值进行处理(去重-筛选)
    localStorage.setItem('data', JSON.stringify(arr)); //将数据写入到本地存储中
  })
  // 数组去重-筛选函数
  function removalDuplicate(arr) {
    for (let i = 0; i < arr.length; i++) {
      var arritem = arr[i].trim(); // 去除字符串两端空格
      // 如果值为空,则不添加
      if (arritem == '') {
        arr.splice(i, 1);
      }
      if (arritem !== "") {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i] == arr[j]) {
            arr.splice(i, 1);//如果第二次输入的值与第一次相同,则添加第二次的值
          }
        }
      }
    }
    return arr;
  }
  // 渲染数据
  function historydata(searchArr) {
    searchArr.reverse();//反转,从后往前添加
    // 遍历出数据
    if (searchArr.length <= max_history) {//如果存储数据小于等于max_history,则遍历渲染
      for (let i = 0; i < searchArr.length; i++) {
        $('#list').append(`<li class='on'><a href='#' class='active'>${searchArr[i]}</a><li>`);
      }
    } else {//否则渲染最大历史记录条数
      for (let i = 0; i < max_history; i++) {
        $('#list').append(`<li class='on'><a href='#' class='active'>${searchArr[i]}</a><li>`);
      }
    }
  }
  // 初始化-清空历史记录
  function init_history() {
    $('#list').html('');
  }
})

总结

以上所述是小编给大家介绍的使用JS location实现搜索框历史记录功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
纯javascript制作日历控件
Jul 17 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
JS实现商品筛选功能
Aug 19 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
js实现幻灯片轮播图
Aug 14 Javascript
vue实现移动端图片上传功能
Dec 23 #Javascript
vue实现拖拽效果
Dec 23 #Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 #jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 #jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 #jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 #jQuery
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 #Javascript
You might like
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
JavaScript 学习笔记(十一)
2010/01/19 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
javascript包装对象实例分析
2015/03/27 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
python计算N天之后日期的方法
2015/03/31 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python基于SMTP协议发送邮件
2019/05/31 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
生态养殖创业计划书
2014/05/06 职场文书
擅自离岗检讨书
2014/09/12 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
初婚初育证明范本
2015/06/18 职场文书
环保建议书范文
2015/09/14 职场文书
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers