zoukankan      html  css  js  c++  java
  • 利用百度搜索接口模仿百度搜索

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                margin:0;
                padding: 0;
            }
    
    
            #search{
                 600px;
                margin:0 auto;
                margin-top: 100px;
                position: relative;
            }
            #search input{
    
                 480px;
                height: 100%;
                border: 1px solid #b6b6b6;
                height: 20px;
                padding: 9px 7px;
                font: 16px arial;
                border: 1px solid #b8b8b8;
                border-bottom: 1px solid #ccc;
                border-right: 0;
                vertical-align: top;
                outline: none;
                box-shadow: none;
                -webkit-appearance: textfield;
                background-color: white;
                -webkit-rtl-ordering: logical;
                user-select: text;
    
            }
    
            #search button{
                cursor: pointer;
                box-sizing: border-box;
                 97px;
                height: 40px;
                line-height: 38px;
                padding: 0;
                border: 0;
                background: none;
                background-color: #38f;
                font-size: 16px;
                color: white;
                box-shadow: none;
                font-weight: normal;
                margin-left: -20px;
            }
    
            .result{
                position: absolute;
    
                padding: 9px 7px;
                background: #ddd;
    
            }
    
            .search-res{
                position: absolute;
                top: 100%;
                left: 0;
                 480px;
                border: 1px solid #b6b6b6;
                border-top: none;
            }
    
            .search-res li{
                list-style-type: none;
                line-height: 20px;
                padding: 2px 5px;
                border-bottom: 1px solid #b6b6b6;
            }
            .color{
                background-color: red;
            }
        </style>
        <script src="../jsonp.js"></script>
    </head>
    <body>
    <div id="search">
        <input type="text">
        <button>搜索</button>
        <ul class="search-res"> </ul>
    </div>
    </body>
    <script>
        function Search() {
            this.txt=document.querySelector("#search input")
            this.ul=document.querySelector(".search-res");
            this.ali=this.ul.children
            this.j=0;
            this.url="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"  //百度搜索接口
            this.addEvent()
        }
        Search.prototype.addEvent=function () {
            var that=this;
            this.txt.onkeyup=function () {
                that.value=this.value;
                that.load()
            }
    
        };
        Search.prototype.load=function () {
            var that=this;
            jsonp(this.url,function(res){
                console.log(res);
                that.res = res.s;  //返回的是个对象,s是需要的那个key
                that.display();
            },{
                wd:this.value,
                columnName:"cb",
                cb:"gkioy"
            })
    
        };
        Search.prototype.display = function(){          //增加列数
            // console.log(this.res)
            var str = "";
            for(var i=0;i<this.res.length;i++){
                str += `<li>${this.res[i]}</li>`
            }
            this.ul.innerHTML = str;
            this.color()
        };
        Search.prototype.color=function () {
            var that=this
            for(var i=0;i<this.ali.length;i++){
                this.ali[i].onmouseover=function () {
                this.style.backgroundColor="red"
                };
                this.ali[i].onmouseout=function () {
                    this.style.backgroundColor=""
                };
                this.ali[i].onclick=function () {
                    that.txt.value=this.innerHTML;
                    that.ul.style.display="none"
                };
                this.txt.onclick=function () {
                    that.ul.style.display="block"
                }
                    document.onkeydown=function (eve) {
                    console.log(that.ali.length-1)
                        var e=eve||window.event
                        console.log(that.j)
                        if(e.keyCode==40&& that.txt.value){
                            if(that.j==that.ali.length-1){
                                that.j=0
                            }
                            else {
                                that.j++
                            }
                            that.ali[that.j].className="color"
    
                        };
                        if(e.keyCode==38 && that.txt.value){
                            if(that.j==0){
                                that.j=that.ali.length-1
                            }
                            else {
                                that.j--
                            }
                            that.ali[that.j].className="color"
                        };
                }
            }
        };
    
        new Search()
    </script>
    </html>
  • 相关阅读:
    5.4 省选模拟赛 修改 线段树优化dp 线段树上二分
    一本通 高手训练 1782 分层图 状压dp
    luogu P3830 [SHOI2012]随机树 期望 dp
    5.2 省选模拟赛 或许 线型基
    luogu P4562 [JXOI2018]游戏 组合数学
    一本通 高手训练 1781 死亡之树 状态压缩dp
    luogu P4726 【模板】多项式指数函数 多项式 exp 牛顿迭代 泰勒展开
    4.28 省选模拟赛 负环 倍增 矩阵乘法 dp
    HDU 1756 Cupid's Arrow 计算几何 判断一个点是否在多边形内
    一本通 高手训练 1763 简单树 可持久化线段树 树链刨分 标记永久化
  • 原文地址:https://www.cnblogs.com/hy96/p/11522950.html
Copyright © 2011-2022 走看看