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

 更新时间:2019年12月23日 13:43:04   作者:老不死的臭妖怪  
这篇文章主要介绍了使用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实现搜索框历史记录功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • Bootstrap每天必学之表单

    Bootstrap每天必学之表单

    Bootstrap每天必学之表单,本文讲解的就是大家最为常用的提交数据的Form表单,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • bootstrap 点击空白处popover弹出框隐藏实例

    bootstrap 点击空白处popover弹出框隐藏实例

    下面小编就为大家分享一篇bootstrap 点击空白处popover弹出框隐藏实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • showModalDialog模态对话框的使用详解以及浏览器兼容

    showModalDialog模态对话框的使用详解以及浏览器兼容

    showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面。区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法操作了)
    2014-01-01
  • 使用layui的router来进行传参的实现方法

    使用layui的router来进行传参的实现方法

    今天小编就为大家分享一篇使用layui的router来进行传参的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 改变隐藏的input中value的值代码

    改变隐藏的input中value的值代码

    本文为大家介绍下如何改变隐藏的input中value的值,一句代码就可以实现,感性的朋友可以参考下
    2013-12-12
  • 深入理解JavaScript 变量对象

    深入理解JavaScript 变量对象

    变量对象是与执行上下文相关的数据作用域,存储了在上下文中定义的变量和函数声明,本文主要介绍了JavaScript 变量对象,具有一定的参考价值,感兴趣的可以了解一下
    2022-05-05
  • javascript实现行拖动的方法

    javascript实现行拖动的方法

    这篇文章主要介绍了javascript实现行拖动的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • 微信小程序单选radio及多选checkbox按钮用法示例

    微信小程序单选radio及多选checkbox按钮用法示例

    这篇文章主要介绍了微信小程序单选radio及多选checkbox按钮用法,结合实例形式分析了微信小程序中单选radio及多选checkbox按钮的选项设置、读取、选中等相关操作技巧,需要的朋友可以参考下
    2019-04-04
  • JavaScript实现简易QQ聊天界面

    JavaScript实现简易QQ聊天界面

    这篇文章主要为大家详细介绍了JavaScript实现简易QQ聊天界面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 基于zepto.js实现手机相册功能

    基于zepto.js实现手机相册功能

    这篇文章主要为大家详细介绍了基于zepto.js实现手机相册功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论