使用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 相关文章推荐
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
node.js从数据库获取数据
May 08 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 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
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
js对象的比较
2011/02/26 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
js实现简易计算器功能
2019/10/18 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
pandas分批读取大数据集教程
2020/06/06 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
数控技校生自我鉴定
2014/03/02 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS