百度搜索框智能提示案例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 相关文章推荐
jquery BS,dialog控件自适应大小
Jul 06 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
js实现文本框选中的方法
May 26 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
详解JavaScript执行模型
Nov 16 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
PHP编程网上资源导航
2006/10/09 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
php操作redis缓存方法分享
2015/06/03 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
大学生自我评价怎样写好
2013/10/23 职场文书
《学会合作》教学反思
2014/04/12 职场文书
家长会开场白和结束语
2015/05/29 职场文书
首席执行官观后感
2015/06/03 职场文书
生产车间管理制度
2015/08/04 职场文书
《火烧云》教学反思
2016/02/23 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书