仿百度搜索,匹配历史搜索
Posted instelly
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了仿百度搜索,匹配历史搜索相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>历史搜索</title> <script type="text/javascript" src="jquery.min.js"></script> </head> <style> .search_content{ overflow: hidden; float: left; width: 720px; } .sso_wk{ width: 582px; height: 32px; border: 1px solid #b6b6b6; float: left; outline: none; padding: 0 10px; } .sso_an{ width: 100px; height: 34px; color: #fff; letter-spacing: 1px; background: #3385ff; border:none; float: left; } .sslb{ width: 602px; border: 1px solid #b6b6b6; float: left; border-top:none; } .sslb ul{ list-style: none; float: left; margin: 0; padding: 0; width: 100%; } .sslb ul li{ height:30px; line-height:30px; font-size:14px; padding: 0 10px; } .sslb ul li:hover{ background:#f8f8f8; } .scls{ float:right; color:#3385ff; background:#fff; border:none; cursor: pointer; } </style> <body> <div class="search_content"> <input name="keywords" id="keywords" type="text" class="sso_wk" x-webkit-speech="" autofocus placeholder="请输入搜索内容"> <input name="" class="sso_an" type="button" onclick="SiteSearch();" value="搜索"> <div class="sslb" style="display:none"> <ul id="lssslb"> </ul> </div> </div> <script type="text/javascript"> var searchInput = document.getElementById("keywords"); var bgDiv = document.getElementsByClassName("search_content")[0]; var searchResult = document.getElementById("lssslb"); var timer = null; //注册输入框键盘抬起事件 searchInput.onkeyup = function (e) { // 如果输入框内容为空 if (this.value.length === 0) { closeFind(); return; } else{ find(); } if (this.timer) { clearTimeout(this.timer); } // if (e.keyCode !== 40 && e.keyCode !== 38) { // // 函数节流优化 // this.timer = setTimeout(() => { // SiteSearch(); // }, 130) // } }; // 事件委托 点击li标签或者点击搜索按钮跳转到百度搜索页面 bgDiv.addEventListener("click", function (e) { if (e.target.nodeName.toLowerCase() === ‘li‘) { var keywords = e.target.innerText; searchInput.value = keywords; SiteSearch(); } else if (e.target.id === ‘btn‘) { SiteSearch(); } }, false); var i = 0; var flag = 1; // 事件委托 监听键盘事件 bgDiv.addEventListener("keydown", function (e) { var size = searchResult.childNodes.length; if (e.keyCode === 13) { SiteSearch(); }; // 键盘向下事件 if (e.keyCode === 40) { if (flag === 0) { i = i + 2; } flag = 1; e.preventDefault(); if (i >= size) { i = 0; } if (i < size) { var n=i++; searchInput.value = searchResult.childNodes[n].innerText; searchResult.childNodes[n].style.background="#f8f8f8"; } }; // 键盘向上事件 if (e.keyCode === 38) { if (flag === 1) { i = i - 2; } flag = 0; e.preventDefault(); if (i < 0) { i = size - 1; } if (i > -1) { var n=i--; searchInput.value = searchResult.childNodes[n].innerText; searchResult.childNodes[n].style.background="#f8f8f8"; } }; }, false); //搜索并存值 function SiteSearch(){ var sszd = $("#keywords").val(); setHistoryItems(sszd); console.log(sszd); //location.href=thisurl+"&sszd="+sszd+""; }; //匹配历史搜索 function find(){ var str=localStorage.historyItems; var s = ‘‘; var keywords=$("#keywords").val(); if(str!=undefined){ var strs= new Array(); strs=str.split("|"); for(var i=0;i<strs.length;i++){ if(strs[i].trim().length>0 && strs[i].indexOf(keywords)!=-1){ s+= ‘<li onclick="changekeywords(‘‘+strs[i]+‘‘)" >‘+strs[i]+‘</a></li>‘; } } if(str.trim().length>0){ $(".sslb").show(); $("#lssslb").html(s+‘<input type="button" class="scls" onclick="clearHistory();" value="清除历史记录">‘); } } } //隐藏搜索选择栏 function closeFind(){ $(".sslb").hide(); $("#lssslb").empty(); } //改变搜索框值 function changekeywords(keywords){ $("#keywords").val(keywords); $(".sslb").hide(); $("#lssslb").empty(); } //存值方法,新的值添加在首位 function setHistoryItems(keyword) { let { historyItems } = localStorage; if (historyItems === undefined) { localStorage.historyItems = keyword; } else { historyItems = keyword + ‘|‘ + historyItems.split(‘|‘).filter(e => e != keyword).join(‘|‘); localStorage.historyItems = historyItems; } }; //清除值 function clearHistory() { localStorage.removeItem(‘historyItems‘); var div = document.getElementById("lssslb"); while(div.hasChildNodes()) //当div下还存在子节点时 循环继续 { div.removeChild(div.firstChild); } $(".lssslb").append(‘<div class="rmssts">暂无搜索记录</div>‘); } //点击页面任何其他地方 搜索结果框消失 document.onclick = () => closeFind(); </script> </body> </html>
以上是关于仿百度搜索,匹配历史搜索的主要内容,如果未能解决你的问题,请参考以下文章