淘先锋技术网

首页 1 2 3 4 5 6 7

快来看啦！~百度搜索JSONP实战！

先设计一个简单的搜索样式如下图

在这里插入图片描述

基础内容参考文章 如何优雅的使用JSONP？猛戳此处！！！

<div class="search-wrap ">
    <div class="input-wrap">
        <input type="text" class="search-input J_searchInput" placeholder="百度一下">
    </div>
    <div class="list-wrap">
        <ul class="wd-list J_wdList"></ul>
    </div>
</div>

HTML代码比较简单，CSS也没多少

a{
    color: #000;
    text-decoration: none;
}

ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
input{
    outline: none;
    border: none;
}

.search-wrap{
    width: 540px;
    height: 36px;
    margin: 100px auto;
}

.input-wrap{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.input-wrap .search-input{
    width: 100%;
    height: 100%;
    padding: 0 0 0 18px;
    box-sizing: border-box;
    border: 1px solid #b9bbbc;
    border-radius: 10px;
}
.search-wrap.click .search-input{
    border-radius: 10px 10px 0 0;
    border: 2px solid #4E6EF2;
    border-bottom: none;
}
.search-wrap.click .list-wrap{
    width: 536px;
    height: auto;
    border-radius: 0 0 10px 10px;
    border: 2px solid #4E6EF2;
    border-top: none;
}
.search-wrap.click .list-wrap .wd-list{
    margin: 0 14px 0;
    padding: 8px 0 7px;
}
.search-wrap.click .list-wrap .wd-list li{
    padding: 0;
    color: #626675;
    line-height: 28px;
    cursor: pointer;
}
li:hover{
    background-color: #eaeaea;
}
.wd-list{
    display: none;
}
.search-wrap.click .wd-list{
    display: block;
}

完整的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度搜索案例</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="search-wrap ">
    <div class="input-wrap">
        <input type="text" class="search-input J_searchInput" placeholder="百度一下">
    </div>
    <div class="list-wrap">
        <ul class="wd-list J_wdList"></ul>
    </div>
</div>
<script type="text/html" id="J_listTpl">
    <li class="wd-item">
        <a href="https://www.baidu.com/s?wd={{wdLink}}" class="wd-lk" target="_blank">{{wd}}</a>
    </li>
</script>
<script src="index.js"></script>
</body>
</html>

实现百度搜索

效果如下图
在这里插入图片描述

编写js部分，引入js脚本

//首先获取我们需要操作的dom节点
;(function(){
    var searchInput = document.getElementByClassName('J_searchInput')[0],
        searchWrap = document.getElementByClassName('search-wrap')[0],
        wdList = document.getElementByClassName('J_wdList')[0],
        listTpl = document.getElementById('J_listTpl').innerHtml; //获取模板字符串
    	
    function init(){ //初始化函数
        bindEvent();
    }
    function bindEvent(){//事件管理函数，管理多个事件处理函数
        searchInput.addEventListener('input',typeInput,false);
    }
	//监听input框的输入
   	function typeInput(){
        var val = _trimSpace(this.value) //获取值 传入_trimSpace 函数处理空格
        if(val.length>0){
        	   //如果有值,我们需要请求数据，通过JSONP的形式
            getDatas(val,'setDatas');
         }else{
             searchWrap.className = 'search-wrap'; //如果没有输入值，清空click样式
         }
    }
   	function getDatas(val,cb){
    	    var oScript = document.createElement('script');
        oScript.src =  "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1434,33221,33306,33259,31253,32974,33285,33313,33312,33311,33310,32447,32846,33211,33309,26350,33199,33308,33307,33147,22159&wd=" + val + "&req=2&bs=bzhan&pbs=bzhan&csor=2&pwd=1&cb=" + cb
        document.body.appendChild(oScript);
        document.body.removeChild(oScript);
    }
    function renderList(data){
         var data = data.g,
            len = '',
            list = '';

        try{
            len = data.length; //如果没有数据让长度等于0
        }catch (e) {
            len = 0;
        }
        if (len > 0) {
            data.forEach(item => {
                list += listTpl.replace(/{{(.*?)}}/gim, function (node, key) {
                    return {
                        wd: item.q,
                        wdLink: item.q
                    }[key] //模板替换
                })
            });
            wdList.innerHTML = list;//插入dom中
            searchWrap.className = 'search-wrap click'; //添加样式类
        }else {
            wdList.innerHTML = "";
        }
    }
    //cb 回调函数会在创建script标签时挂载到window对象下
    window.setDatas = function(data){
       //这里的data就是百度返回给前端的数据
        //data中的数据格式
       //{
       //	q: "1",
       //	p: false,
       //   g: Array(10),
       //   slid: "4828783468090735187",
       //	queryid: "0x1548faf0d3ba53"
       //}
        //其中g 就是搜索相关的条目数据
        
        renderList(data);//渲染函数，渲染到dom上
    }
    function _trimSpace(str){//通过正则表达式 去除空格
        return str.replace(/\s+/,'');
    }
    init();
    
})();

到此，百度搜索案例就结束了，JSONP的使用你学会了吗？

路漫漫其修远兮