仿百度搜索，匹配历史搜索

<!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>
posted @ 2019-03-20 10:10 一纸铅华阅读(477) 评论(0) 收藏举报
刷新页面返回顶部
instelly

仿百度搜索，匹配历史搜索

公告
