模糊功能未完,待续。站在前人的基础上完成自己的东西
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.lsss{
width: 220px;
height: 280px;
background-color: #999;
position: relative;
margin: 10px;
overflow: hidden;
}
.lsss >span{
font-size: 12px;
color: #666;
}
.scls{
position: absolute;
bottom: 0px;
right: 0px;
}
#lssslb>a{
height: 25px;
line-height: 25px;
margin-left: 10px;
text-decoration: none;
font-size: 16px;
color: #000;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<body>
<input name="keywords" id="keywords" type="text" class="sso_wk" x-webkit-speech="" placeholder="请输入您要搜索产品" onkeydown="if(event.keyCode==13){Search();return false};">
<input name="" class="sso_an" type="button" onclick="Search();" value="搜索">
<div class="lsss" style="display: none;"><span>历史搜索:</span>
<div class="sslb" id="lssslb">
</div></div>
<script>
$("#keywords").focus(function(){ //获取焦点
$(".lsss").show()
})
//产品搜索并存值
var thisurl="search.cadx?action=search"; //后台的查询接口
function Search(){
var sszd = $("#keywords").val();
setHistoryItems(sszd);
location.href=thisurl+"&sszd="+sszd+"";
};
//取值写入页面
$(function(){
var str=localStorage.history;
var s = '';
if(str==undefined){
s='<div class="rmssts">暂无搜索记录...</div>';
$("#lssslb").append(s);
}else{
var strs= new Array();
strs=str.split("|");
for(var i=0;i<strs.length;i++){
s+= "<a href='search.cadx?action=search&sszd="+strs[i]+"' >"+strs[i]+"</a><br>";
}
$("#lssslb").append(s+'<input type="button" class="scls" onclick="clearHistory();" value="清除历史记录">');
}
});
//存值方法,新的值添加在首位
function setHistoryItems(keyword) {
let { history } = localStorage;
if (history === undefined) {
localStorage.history = keyword;
} else {
history = keyword + '|' + history.split('|').filter(e => e != keyword).join('|');
localStorage.history = history;
}
};
//清除值
function clearHistory() {
localStorage.removeItem('history');
var div = document.getElementById("lssslb");
while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
{
div.removeChild(div.firstChild);
}
$("#lssslb").append('<div class="rmssts">暂无搜索记录...</div>');
}
</script>
</body>
</html>
模糊功能待更新