百度搜索框智能提示案例jsonp


Posted in Javascript onNovember 28, 2016

先给大家展示下效果图:

百度搜索框智能提示案例jsonp

下面一段代码给大家分享了百度搜索框智能提示案例jsonp的知识,具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度下拉_sug-jquery</title>
<script src="jquery-1.11.3.js"></script>
<style>
#sug{
position: absolute;
left: 50%;
margin-left: -150px;
margin-top: 200px;
width: 300px;
background: lightGreen;
height: 40px;
text-align: center;
}
#sug input{
margin-top: 10px;
}
#list{
position: absolute;
left: 50%;
top:50px;
width: 200px;
margin-left: -150px;
margin-top: 200px;
height: auto;
background: lightBlue;
}
#list ul{
padding-left: 0px;
margin: 0px;
}
#list ul li{
background: lightGray;
line-height: 30px;
list-style: none;
padding-left: 10px;
margin-top: 0px;
cursor: pointer;
}
#list ul li.on{
background: lightGreen;
}
</style>
</head>
<body>
<div id="sug">
<div>
<input type="text" id="keyWord" autocomplete=off>
<input type="button" value="百度一下" id="btn">
</div>
</div>
<div id="list">
</div>
<script>
$(function(){
$("#keyWord").keyup(function(e){
var kd = $("#keyWord").val();
var url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+kd;
querySUG(url);
});
});
function querySUG(url){
document.getElementById('list').innerHTML = '';
$.ajax({
type : "get",
async: true,
url : url,
dataType : "jsonp",
jsonp: "cb",
jsonpCallback:"callback",
success : function(data){
var ul = $("<ul></ul>");
$.each(data.s,function(i,element){
var e = $("<li></li>").append(element);
$(ul).append(e);
});
$("#list").append(ul);
},
error:function(){
console.log('fail');
}
});
}
</script>
</body>
</html>

以上所述是小编给大家介绍的百度搜索框智能提示案例jsonp,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 Javascript
JavaScript 绘制饼图的示例
Feb 19 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 #Javascript
ajax级联菜单实现方法实例分析
Nov 28 #Javascript
jQuery select自动选中功能实现方法分析
Nov 28 #Javascript
JS两种类型的表单提交方法实例分析
Nov 28 #Javascript
简单实现JavaScript图片切换效果
Nov 28 #Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 #Javascript
JS调用打印机功能简单示例
Nov 28 #Javascript
You might like
开源SNS系统-ThinkSNS
2008/05/18 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
动态添加option及createElement使用示例
2014/01/26 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
pandas数值计算与排序方法
2018/04/12 Python
python关于调用函数外的变量实例
2019/12/26 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
中班上学期幼儿评语
2014/04/30 职场文书
法律顾问服务方案
2014/05/15 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
教师自我剖析材料
2014/09/29 职场文书
个人专业技术总结
2015/03/05 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书