百度 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的同学们理解更好,更容易上手. 这可能是网上注释最多,看了最易理解的学习小指南吧,哈哈. ...
随机推荐
- linux安装lua_nginx_module模块
ngx_lua_module 是一个nginx http模块,它把 lua 解析器内嵌到 nginx,用来解析并执行lua 语言编写的网页后台脚本,可以用来实现灰度发布.另外淘宝的OpenResty也 ...
- div内容溢出
前几天遇到一个问题,代码是这样一个层次: <div class="province"> <ul> <li>1</li> <li ...
- UDP client,UDP server, TCP server, TCP client
UDP server import java.io.IOException; import java.net.DatagramPacket; import java.net.DatagramSocke ...
- HTML 5入门知识（二）
使用HTML 5结构标签 <article> <article>标签可以在网页中定义独立的内容,包括文章.博客和用户评论等.一个article元素通常有它自己的标题,一般放在一 ...
- import模块后查找模块的绝对路径
>>> import bsddb3>>> bsddb3.__file__'/usr/local/lib/python2.6/site-packages/bsddb3 ...
- solidity语言2
变量类型(Value Types) # 布尔型 关键字 bool 值 true , false 操作符 !, &&, ||, ==, != # 整型 关键字 int(int256), ...
- mysqldump备份脚本一例
参考三思老师书中所写,感觉挺好用,记录下来,虽然是抄袭,但是手抄还是很累的,其中用到的其他脚本,在博客中已经记录: mysql_full_backup.sh#!/bin/sh#Created by C ...
- JavaScript工作机制：V8 引擎内部机制及如何编写优化代码的5个诀窍
概述 JavaScript引擎是一个执行JavaScript代码的程序或解释器.JavaScript引擎可以被实现为标准解释器,或者实现为以某种形式将JavaScript编译为字节码的即时编译器. 下 ...
- March 14 2017 Week 11 Tuesday
Thinking will not overcome fear but action will. 空想终日惶恐,行动方可无惧. As the deadline comes closer and clo ...
- NODE-windows 下安装nodejs及其配置环境
相信对于很多关注javascript发展的同学来说,nodejs已经不是一个陌生的词眼.有关nodejs的相关资料网上已经铺天盖地.由于它的高并发特性,造就了其特殊的应用地位. 国内目前关注最高,维护 ...