百度 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的更多相关文章
- 实现百度地图导航Demo的语音播报功能
上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...
- Data scientist———java实现常见的机器学习代码（跟百度深度学习研究院师兄学机器学习）
2016-05-02开始决定好好记录一切有关<数据科学家>的学习过程.记录学习笔记. --------------------------------------------------- ...
- 百度统计接口demo中错误
百度统计接口中的demo(PHP版本)下载下来配置后运行出错,应该是编写demo时用的php版本比较低吧,作如下几处修改就好了 一:把CURLOPT_SSL_VERIFYHOST的值改为2,因为1版本 ...
- 【百度地图学习-一】初始化以及TextOverlay
一.百度地图的初始化 主要用到三个类: 1.BMapManager:使用地图sdk前需先初始化BMapManager.BMapManager是全局的,可为多个MapView共用,它需要地图模块创建前创 ...
- 小程序入门学习Demo
技术:小程序 概述 适合学习小程序的初级开发人员,入门教程 详细 代码下载:http://www.demodashi.com/demo/14956.html 小程序周边美甲美发预约Demo 代码主 ...
- 深度学习demo
1. Stanford Convolutional Neural Network on the MNIST digits dataset http://cs.stanford.edu/people/k ...
- 百度地图的demo提示key验证错误！错误码：230;
在已经有BaiduMap的APIKey后使用AndroidStudio导入Baidu地图的as版的demo,提示key验证错误!错误码:230; 首先,因为百度地图demo中用自己的keystore文 ...
- 函数指针的应用学习Demo
学习函数指针的应用 ,简单demo #include "stdafx.h" #include "SubClass.h"; //函数指针 typedef int ...
- Umi + Dva的数据传递学习Demo（代码有详细注释）
刚学习时写了篇笔记,以免自己忘记,用了一段时间后,觉得不如做个demo,代码写上注释,方便也在学习umi-dva的同学们理解更好,更容易上手. 这可能是网上注释最多,看了最易理解的学习小指南吧,哈哈. ...
随机推荐
- 科学计算基础包——Numpy
一.NumPy简介 NumPy是高性能科学计算和数据分析的基础包.它是pandas等其他各种工具的基础. 1.NumPy的主要功能 (1)ndarray:一个多维数组结构,高效且节省空间. (2)无需 ...
- webpack、babel模块、模块化
一.webpack介绍 webpack这个工具非常强大,解决了前端很繁琐的一些工具流程繁琐的事情.中文官网链接地址:https://www.webpackjs.com/ 1.为什么要使用webpack ...
- Angular选项卡
前几天我发的东西,可能对于没有基础的人很难理解,那么今天,咱们就发点简单点的东西吧! Angular显示隐藏,选项卡! 还是那句话,话不多说,上代码: <!DOCTYPE html> &l ...
- Mybatis 的多个数据源
主要思路: DataSource --> SqlSessionFactory --> SqlSessionTemplate 第一方式: 定义多套 DataSource --> Sq ...
- Set up ruby debugging environment
Today I finally got ruby debugging working in Eclipse. Below are the major setup steps involved, as ...
- IT人的格言警句
程序员困境:我们通过编码谋生,但环境却正在摧毁我们这种谋生的能力. 在技术日新月异的IT行业,“专家”这个词其实是个危险信号,意味着你的知识距离老化不远了.IT工程师应该经常更换工作领域,了解多个领域 ...
- linux下的动态链接库管理
LD_LIBRARY_PATH Linux环境变量名,该环境变量主要用于指定查找共享库(动态链接库)时除了默认路径之外的其他路径.(该路径在默认路径之前查找) 移植程序时的经常碰到需要使用一些特定的动 ...
- Catia 二次开发资料（转）
Catia 二次开发 CATIA V5在开发之初就遵循面向对象的设计思想(OO),构建了完全基于组件的体系结构(PPR: Products,Process,Resource),有效地解决了维护.管理. ...
- React学习笔记 - Hello World
React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...
- 使用文档碎片（DocumentFragments）追加DOM元素
标签(空格分隔): JavaScript DocumentFragment接口表示一个没有父级文件的最小文档对象.它被当做一个轻量版的Document使用,用于存储已排好版的或尚未打理好格式XML片段 ...