百度搜索框智能提示案例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 标题的自动翻转实现代码
Oct 14 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
angular.js分页代码的实例
Jul 27 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
浅谈js闭包理解
Apr 01 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 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 preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
使用python远程操作linux过程解析
2019/12/04 Python
Python networkx包的实现
2020/02/14 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
JPA的特点
2014/10/25 面试题
中学劳技课教师的自我评价
2014/02/05 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
收费员岗位职责
2015/02/14 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫