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 을 사용 하여 검색 창 기록 기능 을 실현 하 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!