百度 suggestion 学习demo

其他说明文字就不用写那么多了，代码很简单，相信各位道友都能看懂，看不懂的琢磨一下就可以看懂啦。贴代码！拷贝到自己的电脑中运行文件即可,不需要服务器。
 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Baidu Suggest</title>

   <style type="text/css">

     html, body {

       margin: 0;

       padding: 0;

       background: #ccc;

     }

     a, li {

       text-decoration: none;

       list-style: none;

     }

     input, button {

       outline: none;

       border: 1px solid #ccc;

       margin: 0;

       padding: 0;

       text-align: center;

       font: 500 14px/30px '';

     }

     h3 {

       margin: 50px auto;

       text-align: center;

     }

     .main {

       margin: 50px auto;

       width: 800px;

       height: 500px;

       border: 1px solid #999;

       background: #fff;

     }

     #sgtCont {

       position: relative;

       width: 341px;

       height: 40px;

       margin: 50px auto;

       border: 1px solid #999;

       border-top-left-radius: 3px;

       border-top-right-radius: 3px;

     }

     #searchIpt {

       float: left;

       display: block;

       width: 290px;

       height: 100%;

       line-height: 40px;

       outline: none;

       border: none;

       text-align: left;

       padding-left: 10px;

       border-right: 1px solid #999;

     }

     #searchBtn {

       float: left;

       display: block;

       width: 40px;

       height: 100%;

       line-height: 40px;

       text-align: center;

       cursor: pointer;

       background-size: 100% 100%;

     }

     #searchBtn:active {

       background-color: #ccc;

     }

     .lis-wrap {

       display: block;

       position: absolute;

       width: 100%;

       min-height: 40px;

       margin: 0;

       padding: 0;

       left: 0;

       top: 40px;

       border: 1px solid #369;

       box-sizing: border-box;

     }

     .lis-wrap li {

       cursor: pointer;

       padding-left: 10px;

       border-bottom: 1px solid #ccc;

     }

     .lis-wrap li:hover {

       background: #ededed;

     }

     #sgtCont .hidden {

       display: none;

     }

   </style>

 </head>

 <body>

   <h3>Baidu Suggest example</h3>

   <div class="main">

     <div id="sgtCont">

       <input type="text" id="searchIpt" >

       <span id="searchBtn">搜索</span>

       <ul class="lis-wrap hidden"></ul>

     </div>

   </div>

   <!-- <script src="lib/jquery-1.12.3.min.js"></script> -->

   <script>

     /* Baidu Suggest API: http://suggestion.baidu.com/su?wd=keyWords */

     var searchIpt = document.querySelector('#searchIpt');

     var listWrap = document.querySelector('.lis-wrap');

     // jsonp 中的回调函数 callback

     window.baidu = {

       sug: function(data) {

         console.log(data);

         var htm = '';

         if (data.s.length) {

             data.s.forEach(function(item, i, array) {

               htm += "<li>"+ item +"</li>";

             });

           listWrap.classList.remove('hidden');

           listWrap.innerHTML = htm;

         } else {

           listWrap.classList.add('hidden');

           listWrap.innerHTML = '';

         }

       }

     }

     // 搜索框 keydown 触发事件

     // 此处第四个参数不能传 keyWords，由于防抖函数内部原因，只能在 debounce 里获取 keyWords

     searchIpt.addEventListener('keydown', debounce.bind(null, pullResource, null, 300, null), false);

     /*

      * 说明: pullResource 函数

      * 1. 事件处理函数 pullResource, 调用 baidu suggest 接口；

      * 2. 采用 jsonp 跨域方式，回调函数: callback=baidu.sug(param)，

      *    jQuery 中 $.ajax 方式的回调函数: fail, success 都可以省略，不省略的话会执行 fail 回调；

      * 3. jsonp 只能用 get 方式请求

      * */

     // 方法一: 原生方法, 通过动态创建 script 标签跨域

     function pullResource(keyWords) {

       var script = null;

       script = document.querySelector('#baiduSut');

       if (script) {

         document.body.removeChild(script);

       }

       script = document.createElement('script');

       script.id = 'baiduSut';

       script.src = 'http://suggestion.baidu.com/su?callback=window.baidu.sug&wd='+ keyWords;

       document.body.appendChild(script);

     }

       /*// 方法二: 利用 jQuery 的 ajax-jsonp 方式. 需要引入 jquery

       function pullResource(keyWords) {

         $.ajax({

           type: 'get',

           url: 'http://suggestion.baidu.com/su?wd='+ keyWords,

           dataType: 'jsonp',

           jsonp: 'callback',

           jsonpCallback: 'baidu.sug'

         })

         .fail(function(err) {

           console.log(err);

         })

         .success(function(data) {

           console.log(data);

         })

       }*/

     // 防抖函数

     function debounce(fn, context, delay, param) {

       clearTimeout(fn.timer);

       fn.timer = setTimeout(function() {

         var param = param || searchIpt.value.trim();

         // console.log("keyWords: "+ param);

         if (!param) {

           listWrap.classList.add('hidden');

           listWrap.innerHTML = '';

         } else {

           if(Array.isArray(param)) {

             fn.apply(context, param);

           } else {

             fn.call(context, param);

           }

         }

       }, delay || 400);

     }

     /*

       // 原防抖函数

       function debounce(fn, context, delay, param) {

         clearTimeout(fn.timer);

         fn.timer = setTimeout(function() {

           // 如果传数组就传真正的数组, 不要传类数组, 如 arguments 这种不要传, 因为不好判断

           if(Array.isArray(param)) { // 或者 Object.prototype.toString.call(param) === '[object Array]'

             fn.apply(context, param);

           } else {

             fn.call(context, param);

           }

         }, delay || 400);

       }

     */

   </script>

 </body>

 </html>
效果图:
巴特西

百度 suggestion 学习demo

最新文章

热门文章
