文档章节

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

o
 osc_fmg49rzg
发布于 2019/03/20 10:10
字数 620
阅读 9
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Flutter仿京东

01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案) 03Flutter仿京东商城项目 封装适配库以及实现左...

大灰狼的小绵羊哥哥
05/26
0
0
web信息搜集

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 https://blog.csdn.net/qq35569814/article/details/97320660 本章节目录 信息搜集 信息搜集...

秋水sir
2019/08/30
0
0
干货!8套H5 App完整源码!果断收藏!

8套源码全部100%开放。其中,铛铛企业移动IM已经作为正式的开源产品推出(遵循Apache开源协议);其余7款源码均为WeX5开发工具的完整源码案例。 案例一仿淘宝: 主要实现的功能包含: 1)模仿淘...

小次叶
2016/09/08
559
2
Flutter仿京东

01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案) 03Flutter仿京东商城项目 封装适配库以及实现左...

osc_d96oyi6s
05/27
39
0
百度搜索引擎基础知识

从输入关键词,到百度给出搜索结果的过程,往往仅需几毫秒即可完成。百度是如何在浩如烟海的互联网资源中,以如此之快的速度将您的网站内容展现给用户?这背后蕴藏着什么样的工作流程和运算逻...

嘿米
2012/09/18
52
0

没有更多内容

加载失败,请刷新页面

加载更多

Eclipse_JavaEE_Tomcat_MySQL环境配置

安装java环境,配置系统变量(JAVA_HOME,绝对路径) 下载eclipse+Tomcat+mysql window——》preference——》server——》runtime——》tomcat环境 项目右键build path 配mysql jar ,libra...

愿有时光可回首
今天
24
0
MySQL原理 - InnoDB引擎 - 行记录存储 - Redundant行格式

本文基于 MySQL 8 在上一篇:MySQL原理 - InnoDB引擎 - 行记录存储 - Compact格式 中,我们介绍了什么是 InnoDB 行记录存储以及 Compact 行格式,在这一篇中,我们继续介绍其他三种行格式。 ...

zhxhash
今天
29
0
leetcode面试题 17.13(恢复空格)--Java语言实现

求: 哦,不!你不小心把一个长篇文章中的空格、标点都删掉了,并且大写也弄成了小写。像句子"I reset the computer. It still didn’t boot!"已经变成了"iresetthecomputeritstilldidntboo...

拓拔北海
今天
19
0
B站跨年晚会究竟做对了什么?

燃财经(ID:rancaijing)原创 作者 | 赵磊 编辑 | 周昶帆 “补课”是《bilibili晚会 二零一九最美的夜》这个视频中,观众在前两分钟刷得最多的弹幕,寓意着观众是在元旦之后回来补看跨年晚会...

子乾建建_Jeff
01/07
63
0
关于Scrapy爬虫项目运行和调试的小技巧(上篇)

点击上方“Python爬虫与数据挖掘”,进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 迟日江山丽,春风花草香。泥融飞燕子,沙暖睡鸳鸯。 扫除运行Scrapy爬虫程序...

yuhan336
04/02
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部