百度 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的同学们理解更好,更容易上手. 这可能是网上注释最多,看了最易理解的学习小指南吧,哈哈. ...
随机推荐
- (五)html部分标签元素补充
html标签元素十分的多,一次性掌握全部,那是不可能的,在后续的学习中,会不断补充标签元素... 1.行元素和块元素 行标签元素即是标签元素根据内容大小进行自适应,而不是占据一整行. 如<spa ...
- 有关satement与preparedstatement
satement 用于写入数据,例子如下: connection conn=DBHelper.getConnection(); Statement stmt=conn.createStatement( ...
- C# 矩阵运算和一些基本的几何运算
以前工作中写的,这里备个份,有可能用到 基本的矩阵运算类,测试20阶以内应该没啥问题,超过20阶不好使... /// <summary> /// 矩阵 异常 512索引 1024无解 20 ...
- js带文字的圆随机运动
首先是html代码(其实就只有一个画布,记得要把外部js引入写在body底部 <!doctype html> <html> <head> <meta http ...
- python 多线程效果演示
多线程演示 不使用多线程的情况 import threading import time def run(n): print("task ",n) time.sleep(2) ru ...
- 将CSV文件中的数据导入到SQL Server 数据库中
导入数据时,需要注意 CSV 文件中的数据是否包含逗号以及双引号,存在时,导入会失败 选择数据库 -> 右键 -> 任务 -> 导入数据 ,然后根据弹出的导入导出向导(如下图)中的提 ...
- 关于main函数的参数，argc,argv的内部机制
偶尔对main函数的参数感兴趣,写了个程序验证. int main(int argc,char **argv) 首先,解释两点: 第一 .系统将参数列表,即我们在shell下输入的命令,存储到一个一维 ...
- jQuery插件编写步骤详解
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...
- 在同一网关下ping不通其他电脑
最近在做数据库相关的程序,所以想先用ping试下和主机连没连着,但发现虽然两台电脑在同一网关下,但却互相ping不通,后来才发现,原来是防火墙在作怪. Omg!感慨一下!默认的情况下,保守的windo ...
- 【转载】#457 Converting Between enums and their Underlying Type
When you declare an enum, by default each enumerated value is represented internally with an int. (S ...