搜索框的历史记录存储与模糊搜索（模糊功能待更新）

模糊功能未完，待续。站在前人的基础上完成自己的东西

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

模糊功能待更新

SKY555ing

发布了42 篇原创文章 · 获赞 13 · 访问量 2万+

私信关注

搜索框的历史记录存储与模糊搜索（模糊功能待更新）

猜你喜欢