正文

仿百度搜索，匹配历史搜索(代码片段)

instelly  instelly  2023-03-09  598

关键词：

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

仿百度壁纸client——实现搜索动画gesturedetector手势识别，动态更新搜索keyword

仿百度壁纸client（五）——实现搜索动画GestureDetector手势识别，动态更新搜索关键字百度壁纸系列仿百度壁纸client（一）——主框架搭建,自己定义Tab+ViewPager+Fragment仿百度壁纸client（二）——主页自己定义ViewPager广告定时轮播图... 查看详情

js仿百度搜索框

1.js仿百度搜索框<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><script>functionshow(json){letoUl=document.getElementById(‘ul1‘);oUl.innerHTML=‘‘;json 查看详情

模拟百度搜索框，输入时显示历史记录

今天写了个小demo，利用本地存储的特点，模拟百度搜索框。主要知识是利用本地存储的特点，模拟百度搜索时的历史记录显示。主要HTML代码为 <divclass="search"><inputtype="text"/><buttonclass="btn">搜索</button></div&g... 查看详情

开启手机百度搜索历史

首先打开百度。2然后打开来的页面中，将我们的鼠标移动到右上角的用户名上。3这时弹出一个下拉列表，这里我们点击选择并打开“个人中心”4进入个人中心页面，这时我们在页面中可以看到"我的搜索”，这就是我们要找... 查看详情

shbash中的历史搜索(代码片段)

查看详情

高仿百度搜索引擎

这是百度搜索HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="css/baiduFirst.css"></head><body> 查看详情

仿百度搜索提示框效果

<!doctypehtml><html><head><metacharset="UTF-8"><title>百度搜索提示框</title><style>*{margin:0;padding:0;outline:none;}.search101{width:650px;margin:300pxauto;font-si 查看详情

仿京东手机端搜索框(代码片段)

目录目录一、搜索框样图二、思路分析三、代码四、难点解析一、搜索框样图二、思路分析1、结构分析：每个部分有哪些内容组成，每个内容用什么标记书写。2、样式分析：重点确定什么样的布局（本次使用f... 查看详情

仿百度自动补全搜索框效果(*附有源码下载)

　页面效果及代码，（源码在下面的下载链接） <html><head><title></title><linkrel="stylesheet"type="text/css"href="css/semantic.css"><scripttype="text/javascript"src="jquery- 查看详情

仿淘宝搜索框(点击隐藏文字)(代码片段)

html部分<body><divclass="search"><inputtype="text"id="txt"/><labelfor="txt"id="message">必败的国际大牌</label></div></body>css部分<style>.searchwidth:300px;height 查看详情

android搜索内容保存历史记录(代码片段)

Android搜索内容保存历史记录一、界面布局主界面布局activity_main.xml<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xml 查看详情

为啥百度的搜索历史记录没有了？

以前在百度搜索栏里面输入东西后，我关闭网页再开点一下就可以看到之前搜索果的信息·但现在没有了·我没有清理IE·请问怎么处理这个问题·我使用的是遨游浏览器。VISTA系统。···我试过了不行的·不过谢谢你·还有解决的... 查看详情

页面缓存的操作（搜索历史记录），页面搜索功能实现(代码片段)

搜索与显示历史记录功能的实现需求完成一次搜索记录一次搜索，以后进入搜索页面会显示搜索历史，点击删除小图标会清空所有缓存分割功能需求主要分割为这几个步骤：进入搜索后判断缓存中是否有值，如果没有缓存，隐藏... 查看详情

怎么取消手机百度网页的搜索历史

　　楼主，你好！首先打开你的手机百度首页，一般当你打开百度首页的时候，之前所搜索的记录就会出现点击智能手机最左面的菜单键，就会出现如下图所示：选择设置选择隐私和安全然后选择需要清除的数据，就OK啦！这时... 查看详情

使用cookie实现历史搜索记录功能(代码片段)

在学习网易云音乐项目的时候，有一个历史搜索记录的功能，就是你点击的关键词被记录下来，然后显示在搜索历史记录里；主要实现方法：项目中使用的是‘good-storage‘: https://www.npmjs.com/package/good-storage1、npmi... 查看详情

sql在mssql查询历史记录中搜索查询(代码片段)

查看详情

vue-resource使用(vue仿百度搜索)

1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法(vue仿百度搜索)在输入框中输入a,然后在百度f12==>network==>复制jshttps://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=14 查看详情

全文本搜索(代码片段)

一、理解全文本搜索　　两个最常使用的引擎为MyISAM和InnoDB，前者支持全文本搜索，而后者不支持。　　通配符和正则表达式搜索机制的限制：1、性能--通配符和正则表达式匹配通常要求MySQL尝试匹配表中所有行（而且这些搜索... 查看详情