百度 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的同学们理解更好,更容易上手. 这可能是网上注释最多,看了最易理解的学习小指南吧,哈哈. ...
随机推荐
- JS文本中间显示省略号
众所周知,文本溢出显示省略号用CSS就可以: 单行文本: white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display ...
- Java开发坏境配置
在"系统变量"中设置3项属性,JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击"编辑",不存在则点击"新建" ...
- CKRule业务规则管理系统部署说明
1. 程序包说明 软件是使用WinForm开发的,包含服务端和客户端,服务端部署在IIS上面,客户端可以在已经安装.Net4.0的windows上面运行. 1.1. 服务端程序包 CKBrmsS ...
- ERP设计之系统基础管理(BS)-日志模块设计(转载)
原文地址:8.ERP设计之系统基础管理(BS)-日志模块设计作者:ShareERP 日志模块基本要素包括: 用户会话.登录.注销.模块加载/卸载.数据操作(增/删/改/审/弃/关等等).数据恢复.日志 ...
- 关于Linux系统使用遇到的问题-1：vi 打开只读(readonly)文件如何退出保存？
问题来源如下: 打开/etc/crontab文件,命令如下: yule@yule-ubuntu:~$ vi /etc/crontab 显示如下内容: # /etc/crontab: system-w ...
- jmeter简单录制
JMeter介绍 1.JMeter,一个100%的纯Java桌面应用,它是Apache组织的开放源代码项目,它是功能和性能测试的工具.JMeter可以用于测试静态或者动态资源的性能(文件.Servle ...
- 网络基础-IP、端口等
首先来理解一下几个概念. 白帽子:有能力破坏电脑安全但不具恶意目的的黑客.白帽子一般有清楚的定义.道德规范并常常试图同企业合作去改善发现的安全弱点. 正义技术员. 灰帽子:对 ...
- Java中条件语句和if-else的嵌套原则
if(condition)Statement 在此时的条件语句中的条件是需要用括号把它括起来. 其实,Java中的条件语句和C/C++中的是一样的.而Java常常希望在某个条件为真的时候执行多条语 ...
- css Media Query详解
Media Queries详解 Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: 1 <link href="css/re ...
- 配置一个高效快速的Git环境
username and email editor difftool and mergetool alias 可以直接修改~/.gitconfig文件,也可以用命令配置一个可以实际使用的高效的Git环 ...