输入框默认为空，点击文本框展示最近10条搜索记录

工作中遇到的，记录下来方便日后查看！

这块需要考虑的还是很多的，需要考虑数据去重，数据排序，存储到本地不能超过多少条，超过多少条需要删除等。

Style

 <style>
    .div{position:relative;}
    #note {width: 50%;overflow: hidden;text-align: left;height: 38px;border: 1px solid #ccc;border-radius: 10px;}
    #search {width: 141px;height: 37px;font-size: 14px;line-height: 14px;color: #959595;padding-bottom: 2px;}
    .hot-list {padding: 10px 0;width: 50%;position: absolute;left: 0px;top: 42px;margin: 0;line-height: 32px;font-size: 14px;background-color: #fff;display:one;border-radius: 4px;border: 1px solid #ccc;}
    .hot-list .itemList {text-indent: 15px;}
    .hot-list .itemList:hover {background: #e8eaed;}
 </style>

HTML

 <div class="div">
      <input name="note" id="note">
      <!--搜索框-->
      <button id="search">搜索</button>
      <!--历史记录-->
      <div class="hot-list"></div>
  </div>

JS

  <script>
         // 备注搜索框方法
        function noteMethod() {
            var hotList = $(".hot-list");
            var input = $("#note");
            $(".hot-list").on('mouseover', '.itemList', function () {
                $("#note").val($(this).html())
            });
            // 备注输入框点击
            input.click(function () {
                if (hisItem.length <= 0) {
                    return
                }
                if (!$(this).val()) {
                    setTimeout(function () {
                        hotList.show();
                    }, 100);
                }
            });
            // 备注输入框输入
            input.on("input", function () {
                if ($(this).val()) {
                    hotList.hide();
                }
            });
            // 点击隐藏
            $(document).click(function () {
                hotList.hide();
            });
        }
        noteMethod()

        /*
         *  备注存储数据处理
         */
        var hisTime; //获取时间数组
        var hisItem; //获取内容数组
        function noteValueInit() {
           hisTime = [];
           hisItem = [];
          // 数据去重
          for (var i = 0; i < localStorage.length; i++) {
              if (!isNaN(localStorage.key(i))) {
                  hisTime.push(localStorage.key(i))
              }
          }


          if (hisTime.length > 0) {
              hisTime.sort() // 排序
              for (var x = 0; x < hisTime.length; x++) {
                  localStorage.getItem(hisTime[x]).trim() && hisItem.push(localStorage.getItem(hisTime[x]));
              }
          }
          //十条数据，多余删除，同时删除localStorage 数据
          if (hisTime.length > 10) {
              let len_ = hisTime.length - 10
              for (let i = 0; i < len_; i++) {
                  localStorage.removeItem(hisTime[i]);
              }
              hisTime.splice(0, len_)
              hisItem.splice(0, len_)
          }
          // 执行noteValueInit(),每次清空之前添加的节点
          $(".hot-list").html('');
          // 将数据追加itemlist
          for (var i = 0; i < hisItem.length; i++) {
              $(".hot-list").prepend('<div class="itemList">' + hisItem[i] + '</div>');
          }
        }
        noteValueInit()
        // 点击搜索存储数据到localstroge
        $("#search").on('click', function () {
            var noteValue = $('#note').val();
            var time = (new Date()).getTime();
            // 将备注的信息放入localStorage做记录
            if ($.inArray(noteValue, hisItem) >= 0) {
                for (var j = 0; j < localStorage.length; j++) {
                    if (noteValue == localStorage.getItem(localStorage.key(j))) {
                        localStorage.removeItem(localStorage.key(j))
                    }
                }
                localStorage.setItem(time, noteValue)
            } else {
                localStorage.setItem(time, noteValue)
            }
            noteValueInit()
        })
        //苹果手机不兼容出现input无法取值以下是解决方法
        $(".delete").on("click", ".word-break", function () {
            var div = $(this).text();
            $('#sec').val(div);
        });
    </script>