如何在JavaScript中使用location實現一個搜索框歷史記錄功能

這篇文章將為大家詳細講解有關如何在JavaScript中使用location實現一個搜索框歷史記錄功能，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

html代碼

<form id="hisform">
  <div id="searchbox">
    <input id="inpt" type="text" autocomplete="off" />
    <input id="btn" type="button" value="搜索" />
    <div id="historybox">
      <h4>搜索記錄:</h4>
      //用于保存記錄信息
      <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 h4 {
   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('');
  }
})

關于如何在JavaScript中使用location實現一個搜索框歷史記錄功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。