实时搜索商品及存储cookies

html:
<div class="search pull-left">
<div class="search-left pull-left">
<i class="sear-icon pull-left"></i>
<input class="search-inp pull-left sso_wk" x-webkit-speech="" autocomplete="off" type="text" id="keywords" placeholder="请输入搜索的内容" onselectstart="return false" />
</div>
<div class="search-right pull-left">
<button class="btn search-btn fs16 c-fff" id="searchButton" type="button">搜索</button>
</div>
<ul id="lssslb" style="display: none;">
<!-- <li>
<div class="search-item">红牛</div>
<span class="his" style="border: 0px solid; float: right;" id="searchHistory_0">历史搜索</span>
<span class="del" style="display: block; border: 0px solid; float: right; display: none;" id="searchHistoryDel_0" searchitemname="红牛">删除 </span>
</li> -->
</ul>
</div>

js:

$("#keywords").focus(function(){
var str=localStorage.historyItems;
 var s = '';
var keywords = $("#keywords").val();
if(!!keywords){
productList();
$("#lssslb").show();
}else{
if(str==undefined){
        s='<li class="rmssts">暂无搜索记录...</li>';
        $("#lssslb").html(s);
    }else{
        var strs= new Array();
        strs=str.split("|");
        for(var i=0;i<strs.length;i++){
           // s+= "<a href='search.aspx?action=search&sszd="+strs[i]+"' >"+strs[i]+"</a>";
s+= '<li class="history-hover">';
s+= '<div class="search-item ellipsis">'+strs[i]+'</div>';
s+= '<span class="his" style="border: 0px solid; float: right;" id="searchHistory_0">历史搜索</span>';
s+= '<span class="del" style="display: block; border: 0px solid; float: right; display: none;" id="searchHistoryDel_0" searchitemname="红牛">删除 </span>';
s+= '</li>';
        }
        $("#lssslb").html(s+'<li class="close fs16 mb10 mt10" >清除全部</li>');
    }
$("#lssslb").show();
}
   
});


$(document).click(function(event){
 var _con = $('.search'); 
 if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
var _tips = $('#lssslb');
if(!_tips.is(event.target) && _tips.has(event.target).length === 0){
    _tips.hide();
}else{
var _tit = _tips.find('#lssslb');
if(_tit.is(event.target) && _tit.has(event.target).length === 0){
_tips.hide();
}
}
 }

    });

//搜索记录
$("body").on("click",".search-btn",function(){

var content = $("#keywords").val().replace(/\s*/g,"");
if(content ==null || content ==""){
alert('请输入要搜索的商品名称！');
}else{
SiteSearch();
$.go('/jdproduct/getsearchproduct?content='+encodeURI(encodeURI(content))+'');
}

})

$("body").on("click",".search-item",function(){
$("#keywords").val($(this).html());
$("#lssslb").hide();
})
//触发事件
$("#keywords").bind('input propertychange', function(){
var str=localStorage.historyItems;
 var s = '';
var keywords = $("#keywords").val();
if(keywords != "" && keywords != null){
productList();
$("#lssslb").show();
}else{
if(str==undefined){
        s='<li class="rmssts">暂无搜索记录...</li>';
        $("#lssslb").html(s);
    }else{
        var strs= new Array();
        strs=str.split("|");
        for(var i=0;i<strs.length;i++){
s+= '<li class="history-hover">';
s+= '<div class="search-item">'+strs[i]+'</div>';
s+= '<span class="his" style="border: 0px solid; float: right;" id="searchHistory_0">历史搜索</span>';
s+= '<span class="del" style="display: block; border: 0px solid; float: right; display: none;" id="searchHistoryDel_0">删除 </span>';
s+= '</li>';
        }
        $("#lssslb").html(s+'<li class="close fs16 mb10 mt10" >清除全部</li>');
    }
$("#lssslb").show();
}
})


$("body").on("click",".close",function(){
clearHistory();
})

//搜索信息
function productList(){
var s = '';
$.ajax({
type: "get",
url: "/api/product/selectjdproductlist",
data: {
"keyword": $("#keywords").val(),
},
success: function(res) {
if(res.hitResult){
for(var i=0;i<15;i++){
s+= '<li>';
s+= '<div class="search-item">'+res.hitResult[i].wareName+'</div>';
s+= '</li>';
}
$("#lssslb").html(s);
}
}
})
}

function SiteSearch(){
    var sszd = $("#keywords").val();
    setHistoryItems(sszd);

// location.href=thisurl+"&sszd="+sszd+"";
};
//存值方法,新的值添加在首位
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").html('<li class="rmssts">暂无搜索记录...</li>');
$("#lssslb").show();
}
//存值方法,新的值添加在首位
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('<li class="rmssts">暂无搜索记录...</li>');
}

 

$("#keywords").keyup(function(event){
if(event.keyCode == 13){
historyList();
}
keyup(event);
});

function keyup(event) {
var o = event.keyCode;
switch (o) {
//其它keyCode事件后续有需求再加
case 13:
var content = $("#keywords").val().replace(/\s*/g,"");
if(content !=null || content !=""){
SiteSearch();
$.go('/jdproduct/getsearchproduct?content='+encodeURI(encodeURI(content))+'');
}
break;
case 8:
case 46:
break;
default:
break;
}
}