百度 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的同学们理解更好,更容易上手. 这可能是网上注释最多,看了最易理解的学习小指南吧,哈哈. ...
随机推荐
- jquery/js不支持ie9以下版本的方法或属性
1.jquery的trim()去除字符串两边的空格,在ie5~8中不支持此方法.若想替换字符串所有的空格看使用replace()正则替换: var date=" 2014-1 0- 15 ...
- 归并排序——Java实现
一.排序思想 将两个或两个以上的一排序文件合并成一个有序文件的过程叫归并,而归并排序就是建立在归并操作上的一种有效的排序算法,该算法是采用分治法的一个非常典型的应用.将以有序的了序列合并,得到完全有序 ...
- Csharp: TreeView 初始化设置默认选择节点
/// <summary> /// 设置查找的节点为选定节点 /// 涂聚文 /// 2013-07-15 /// </summary> /// <param name= ...
- 常见的media断点
landscape mode是指宽度比高度宽的模式,也就是俗称的宽屏模式: portrait mode是指高度比宽度高的模式,也就是俗称的竖屏模式: /*#region SmartPhones */ ...
- numpy中一些常用函数的用法总结
先简单记录一下,后续补充详细的例子 1. strip()函数 s.strip(rm):s为字符串,rm为要删除的字符序列 只能删除开头或是结尾的字符或者字符串.不能删除中间的字符或是字符串 当rm ...
- Android 自定义ListView滚动条样式
使用ListView FastScroller,默认滑块和自定义滑块图片的样子: 设置快速滚动属性很容易,只需在布局的xml文件里设置属性即可: <ListView android:id=&qu ...
- 如何将使用托管磁盘虚拟机的 OS 盘挂载到其他虚拟机上
适用场景 当出现虚拟机无法启动等情况时,需要将虚拟机的 OS 磁盘挂载到其他虚拟机上进行问题诊断或者数据恢复.使用托管磁盘的虚拟机无法通过存储浏览器等工具进行管理,只能通过 PowerShell 来操 ...
- Python 列表排序方法reverse、sort、sorted操作方法
python语言中的列表排序方法有三个:reverse反转/倒序排序.sort正序排序.sorted可以获取排序后的列表.在更高级列表排序中,后两中方法还可以加入条件参数进行排序. reverse() ...
- Android（java）学习笔记6：实现Runnable接口创建线程 和 使用Callable和Future创建线程
1. 前面说的线程的实现是新写一个子类继承Thread: 是将类声明为 Thread 的子类.该子类应重写 Thread 类的 run 方法.接下来可以分配并启动该子类的实例 2. 这里说的方案2是指 ...
- 【洛谷5288】[HNOI2019] 多边形（二叉树模型）
点此看题面 大致题意: 给你一个多边形,用若干不重合.不相交的线段将其划分为若干三角形区域,并定义旋转操作\((a,c)\)为选定\(4\)个点\(a,b,c,d\)满足\(a<b<c&l ...