快捷導(dǎo)航

使用JS location實現(xiàn)搜索框歷史記錄功能

更新時間：2019年12月23日 13:43:04 作者：老不死的臭妖怪

這篇文章主要介紹了使用JS location實現(xiàn)搜索框歷史記錄功能，本文通過實例代碼講解的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

首先，來看下效果圖(樣式什么的就不必吐槽了哈)

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;// 存儲最大歷史數(shù)據(jù)
  // 鼠標移入事件
  $('#inpt').on('focus', function () {
    $('inpt').val = '';
    let data = localStorage.getItem('data'); //從本地存儲中讀取數(shù)據(jù)
    if (!data) {
      $('#historybox').css('display', 'none');
    } else {
      $('#historybox').css('display', 'block');
      historydata(JSON.parse(data)); // 渲染數(shù)據(jù)
    }
  })
  // 鼠標移出事件
  $('#inpt').on('blur', function () {
    $('#historybox').css('display', 'none');
    init_history();// 初始化歷史記錄，清空記錄
  })
  //點擊搜索按鈕時，將搜索內(nèi)容添加到本地存儲
  $('#btn').on('click', function () {
    var search = inpt.value;
    var data = localStorage.getItem('data'); //從本地存儲中讀取數(shù)據(jù)
    if (data) {
      var arr = JSON.parse(data); //如果有數(shù)據(jù)則轉(zhuǎn)換成對象或數(shù)組
    } else {
      var arr = []; //如果沒有數(shù)據(jù)，則新增一條
    }
    arr.push(search);
    removalDuplicate(arr);// 對用戶輸入值進行處理(去重-篩選)
    localStorage.setItem('data', JSON.stringify(arr)); //將數(shù)據(jù)寫入到本地存儲中
  })
  // 數(shù)組去重-篩選函數(shù)
  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;
  }
  // 渲染數(shù)據(jù)
  function historydata(searchArr) {
    searchArr.reverse();//反轉(zhuǎn)，從后往前添加
    // 遍歷出數(shù)據(jù)
    if (searchArr.length <= max_history) {//如果存儲數(shù)據(jù)小于等于max_history,則遍歷渲染
      for (let i = 0; i < searchArr.length; i++) {
        $('#list').append(`<li class='on'><a href='#' class='active'>${searchArr[i]}</a><li>`);
      }
    } else {//否則渲染最大歷史記錄條數(shù)
      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('');
  }
})

總結(jié)

以上所述是小編給大家介紹的使用JS location實現(xiàn)搜索框歷史記錄功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: