<!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>
