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

 <!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的更多相关文章

  1. 实现百度地图导航Demo的语音播报功能

    上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...

  2. Data scientist———java实现常见的机器学习代码（跟百度深度学习研究院师兄学机器学习）

    2016-05-02开始决定好好记录一切有关<数据科学家>的学习过程.记录学习笔记. --------------------------------------------------- ...

  3. 百度统计接口demo中错误

    百度统计接口中的demo(PHP版本)下载下来配置后运行出错,应该是编写demo时用的php版本比较低吧,作如下几处修改就好了 一:把CURLOPT_SSL_VERIFYHOST的值改为2,因为1版本 ...

  4. 【百度地图学习-一】初始化以及TextOverlay

    一.百度地图的初始化 主要用到三个类: 1.BMapManager:使用地图sdk前需先初始化BMapManager.BMapManager是全局的,可为多个MapView共用,它需要地图模块创建前创 ...

  5. 小程序入门学习Demo

    技术:小程序   概述 适合学习小程序的初级开发人员,入门教程 详细 代码下载:http://www.demodashi.com/demo/14956.html 小程序周边美甲美发预约Demo 代码主 ...

  6. 深度学习demo

    1. Stanford Convolutional Neural Network on the MNIST digits dataset http://cs.stanford.edu/people/k ...

  7. 百度地图的demo提示key验证错误！错误码：230;

    在已经有BaiduMap的APIKey后使用AndroidStudio导入Baidu地图的as版的demo,提示key验证错误!错误码:230; 首先,因为百度地图demo中用自己的keystore文 ...

  8. 函数指针的应用学习Demo

    学习函数指针的应用 ,简单demo #include "stdafx.h" #include "SubClass.h"; //函数指针 typedef int ...

  9. Umi + Dva的数据传递学习Demo（代码有详细注释）

    刚学习时写了篇笔记,以免自己忘记,用了一段时间后,觉得不如做个demo,代码写上注释,方便也在学习umi-dva的同学们理解更好,更容易上手. 这可能是网上注释最多,看了最易理解的学习小指南吧,哈哈. ...

随机推荐

  1. 集合之Iterator迭代器

      Iterator迭代器概述: java中提供了很多个集合,它们在存储元素时,采用的存储方式不同.我们要取出这些集合中的元素,可通过一种通用的获取方式来完成. Collection集合元素的通用获取 ...

  2. BAT的java面试题

    公司:国内三巨头其中的一家!面试时间约在1月份左右!基本上都是在晚上,所以不影响白天上班! 一面 一面偏架构方面 1.介绍一下自己,讲讲项目经历 2.你们项目中微服务是怎么划分的,划分粒度怎么确定? ...

  3. RDMA in CloudComputing

    https://blog.csdn.net/qq_21125183/article/details/80563463

  4. AngularJS Toaster的简单介绍

    github地址: https://github.com/jirikavi/AngularJS-Toaster 参考博客: https://www.cnblogs.com/youzhuxiaoyao/ ...

  5. CSS3图片边框

    CSS3图片边框 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似,语法规则:

  6. Enumeration 接口的使用

          Enumeration是一个接口,定义了两个规则,可以获取连续的数据,对数据结构非常重要.       接口源码: publicinterfaceEnumeration<E>{ ...

  7. Object中的clone方法

      Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象 ...

  8. Infinity 与 NAN

    System.out.println(5.0/0.0+''-"+0.0/0.0); 正确的输出结果是Infinity-NaN 1.为什么不是java.lang.ArithmeticExcep ...

  9. kahadb设计

    Kahadb设计思想   简介 hakadb是activemq的持久化数据库,作为消息队列的存储,每个消息有一个消息ID,提供了对消息的快速的查找,更新,以及消息的事物支持,以及意外磬机之后的恢复.丰 ...

  10. WPF产生不重复的随机数

    WPF产生不重复的随机数 在给定的区间范围(比如[50,99]),产生给定数量的随机数(不如10个),要求产生的随机数不重复首先给定变量min=50;max=99+1;//习惯与程序规定的编码不同所致 ...