前端搜索建议实现-优快云博客

本文链接：https://blog.youkuaiyun.com/gw616/article/details/100058056

JSONP：

节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
防抖：在事件被触发的n秒后执行回调，如果在这n秒内又被触发，则重新计时。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{
            border:1px solid #b6b6b6;
            background-color: #fff;
            display: inline-block;
            vertical-align: top;
            width: 539px;
            height: 32px;
            text-align: left;
            padding-left: 20px;
            padding-right: 20px;
        }
        button{
            width: 100px;
            height: 36px;
            color:white;
            font-size:15px;
            background:#3385ff;
            /*border-bottom:1px solid #2d78f4;*/
            outline: medium;
           border: 1px solid #2d78f4 ;
        }
        .con
        {
            position: absolute;
            width: 700px;
            margin: auto;
            left:0;
            right: 0;
            top:200px;
            bottom: 0;
        }
        ul{
            list-style: none;
            position: absolute;
            top:20px;
            padding: 0;
            width: 579px;
            border: 1px solid #b6b6b6;
            border-top:none ;
        }
        li{
            padding: 5px 20px;

        }
        li:hover
        {
            background-color: #b6b6b6;
        }
        a{
            color: #000000;
            text-decoration: none;
        }
    </style>
</head>
<body>
   <div class="con">
       <input type="text"><button>百度一下</button>
   </div>
<script>
    var id,script,con,ul;
    init();
    function init() {
        con=document.querySelector(".con");
        var input=document.querySelector("input");
        input.addEventListener("input",inputHandler);
    }
    
    function inputHandler(e) {
        var input=this;
        if(id) return;            如果id存在就返回
        id=setTimeout(function () {
            clearTimeout(id);
            id=0;  
            jsonp(input.value);      带入值 
        },500);  
    }
    
    function jsonp(str) {       通信；str通信内容
        if(script){
            script.remove();
            script=null;
        }
        script=document.createElement("script");
        script.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+str+"&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";
        document.body.appendChild(script);
    }          +str+要查询的内容 
    
    function callback(obj) {    回调函数 
        if(ul){					     输入内容显示ul，不输入 就不显示。 
            ul.remove();
            ul=null;
        }
        ul=document.createElement("ul");
        for(var i=0;i<obj.s.length;i++){
            var li=document.createElement("li");					s:显示内容的数组	 
            var a=document.createElement("a");
            a.href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+obj.s[i]+"&rsv_pq=ad9b6d9a0009dbc2&rsv_t=2efe0iY5QK%2F8ohJGwJuyhGN4D2sXOyfZdM%2FndoajISVqLkrY4vFozXKqMJc&rqlang=cn&rsv_enter=1&rsv_dl=ts_0&rsv_sug3=7&rsv_sug1=6&rsv_sug7=101&rsv_sug2=1&prefixsug=ss&rsp=0&inputT=221326&rsv_sug4=222247";
            a.textContent=obj.s[i];
            li.appendChild(a);
            ul.appendChild(li);
        }
        con.appendChild(ul);
    }
</script>
</body>
</html>

百度搜索框