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

前端  /  管理员 发布于 7年前   309

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

html代码

  
            
      
搜索记录:
      //用于保存记录信息      
      
      

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(`
${searchArr[i]}
`);      }    } else {//否则渲染最大历史记录条数      for (let i = 0; i < max_history; i++) {        $('#list').append(`
${searchArr[i]}
`);      }    }  }  // 初始化-清空历史记录  function init_history() {    $('#list').html('');  }})

总结

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

您可能感兴趣的文章:

• JavaScript实现搜索框的自动完成功能(一)
• js实现搜索框关键字智能匹配代码
• JS实现仿google、百度搜索框输入信息智能提示的实现方法
• JS+CSS实现仿新浪微博搜索框的方法
• javascript 中设置window.location.href跳转无效问题解决办法
• 解决微信浏览器Javascript无法使用window.location.reload()刷新页面
• JS中Location使用详解