jquery外掛實現搜尋歷史
阿新 • • 發佈：2021-04-25
每天一個jquery外掛-做搜尋歷史，供大家參考，具體內容如下
效果如下
程式碼部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>做搜尋歷史</title> <script src="js/jquery-3.4.1.min.js"></script> <style> *{ margin: 0px; padding: 0px; } #searchbox{ /* border: 1px solid lightgray; */ height: 40px; width: 720px; position: relative; } #searchinput{ border: 1px solid lightgray; border-radius: 5px 0px 0px 5px; height: 28px; position: absolute; right: 45px; top: 5px; left: 5px; width: 670px; outline: none; text-indent: 12px; font-size: 12px; color: gray; } #searchinput:focus{ border-color: rgb(252,25,68); } #searchinput:focus~#morebox{ display:flex; } #searchbtn{ height: 30px; width: 40px; border: none; border-radius: 0px 5px 5px 0px; background-color: rgb(252,68); position: absolute; right: 5px; top: 5px; display: flex; justify-content: center; align-items: center; cursor: pointer; } #searchbtn img{ width: 25px; hei程式設計客棧ght: 25px; } #morebox{ border: 1px solid lightgray; position: absolute; top: 40px; left: 5px; right: 5px; height: 370px; z-index: 7; border-radius: 2px; display: flex; display: none; } #push{ flex: 1; /* border: 1px solid lightgray; */ position: relative; } #history{ /* display: none; */ flex: 1; /* border: 1px solid lightgray; */ position: relative; } .head{ position: absolute; top: 0px; width: 100%; height: 30px; border-bottom: 1px solid lightgray; font-size: 12px; display: flex; align-items: center; text-indent: 12px; color: rgb(252,85,49); } .main{ position: absolute; top: 30px; width: 100%; bottom: 0px; overflow-x:hidden; overflow-y: auto; } .item{ font-size: 12px; height: 30px; display: flex; align-items: center; text-indent: 12px; cursor: pointer; } .item:hhttp://www.cppcns.comover{ background-color: lightgray; } </style> </head> <body> <div id="searchbox"> <input id="searchinput" placeholder="c一下" /> <button id="searchbtn"><img src="img/sc.png"></button> <div id="morebox"> <div id="history"> <div class="head">搜尋歷史</div> <div class="main"></div> </div> <div id="push"> <div class="head">熱門推薦</div> <div class="main"> <div class="item">微軟終於對JDK下手了</div> dbOsOZ<div class="item">小米隔空充電技術</div> <div clas程式設計客棧s="item">linux常用命令大全</div> <div class="item">阿飛超努力又水文了</div> <div class="item">每天學一個jquery外掛竟然沒有外掛！究竟是道德的淪喪，還是人性的扭曲</div> </div> </div> </div> </div> </body> </html> <script> $(document).ready(function(){ //每次點選搜尋就假如快取之中 // $(".item").click(function(){ var str = $(this).text(); $("#searchinput").val(str) }) // localStorage["history"] = '[]'//清除一下快取; drawhistory(); $("#searchbtn").click(function(){ var str = $("#searchinput").val(); if(str&&str!=""){ var arr = getSession(); arr.push(str); localStorage["history"] = JSON.stringify(arr); drawhistory(); } }) getSession(); //根據快取找到歷史，然後生成搜尋歷史 function drawhistory(){ var arr = getSession(); $("#history .main .item").remove(); arr.forEach(item=>{ var $item = $("<div class='item'>"+item+"</div>"); $item.appendTo程式設計客棧($("#history .main")); }) } //獲得快取 function getSession(){ var ses = localStorage["history"]; var arr = ses==undefined?[]:JSON.parse(ses); return arr; } }) </script>
思路解釋
1、佈局是個硬傷，我也不知道我這個佈局是不是最合適的，不過看著沒毛病
2、然後歷史部分就是存到localStorage裡面，在合適的動作的地方處理成對應的效果放回dom裡面
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。