如何使用jquery的jsonp实现仿百度下拉列表
Posted 时光不染回忆不淡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用jquery的jsonp实现仿百度下拉列表相关的知识，希望对你有一定的参考价值。
使用了mui布局，可以换布局，这个不重要，重要的是怎么实现的
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
//修改样式的css可以不看
body{
background-color: #fff;
}
.header-search{
width: 100%;
height: 44px;
background-color: #f8f8f8;
position: fixed;
top: 0px;
}
.my-search-input{
width: 80%;
margin: 3px auto;
height: 38px;
line-height: 38px;
}
/*.mui-input-row:last-child{
background-color: #fff;
}*/
.mui-search .mui-placeholder{
background-color: #fff;
}
.mui-active .mui-placeholder{
background-color: #fff;
}
.mui-search .mui-placeholder{
font-size: 20px;
}
input[type=search]{
background-color: #fff;
}
.hot-search{
margin-top: 44px;
text-align: center;
width: 100%;
border-top: 1px solid transparent;
}
.hot-search h2{
width: 100%;
font-size: 35px;
margin-top: 50px;
margin-bottom: 50px;
}
.searchList{
width: 100%;
padding: 0;
margin: 0;
}
.searchList li{
width: 100%;
list-style: none;
font-size: 33px;
color: #0db252;
font-weight: bold;
height: 40px;
line-height: 40px;
}
.searchList li:hover{
font-size: 40px;
cursor: pointer;
color: yellowgreen;
}
.searchList .active-li{
font-size: 40px;
cursor: pointer;
color: yellowgreen;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<div class="header-search">
<div class="mui-input-row mui-search my-search-input">
<input type="search" class="mui-input-clear" placeholder="搜索" name="Access-Control-Allow-Origin">
</div>
</div>
<div class="hot-search">
<h2>热门搜索</h2>
<ul class="searchList">
<!--<li>腾讯</li>-->
</ul>
</div>
</body>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/interface.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取搜索的一些路径 这个路径是使用自己电脑配置的接口 不用使用后面有使用百度的接口
/*$.getJSON(searchList,{},function(r){
var searchListData = r.data;
var html = "";
for (var i = 0; i < searchListData.length; i++) {
var item = searchListData[i];
$(".searchList").append("<li>"+item+"</li>");
}
}); */
//文本框数据发生改变 借用百度接口
$(".header-search input").on("input propertychange",function(){
var keyword = $(this).val();
$.ajax({
type: "get",
async: false,
url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?",
data:{
wd:keyword
},
dataType: "jsonp",
jsonp: "cb",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
//jsonpCallback:"message",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(r){
// alert(‘你的名字：‘ + r.s);
$(".searchList").empty();
var searchListData = r.s;
for (var i = 0; i < searchListData.length; i++) {
var item = searchListData[i];
$(".searchList").append("<li>"+item+"</li>");
}
},
error: function(){
alert(‘fail‘);
}
});
});
var num = -1;
//进入百度搜索页面的参数
var paramsWd = "";
//通过上下键控制 走向 通过enter控制进入哪个页面
$(".header-search input").on("keydown",function(event){
//event.which 获取键盘上的ACCIS码值
switch (event.which){
//上键 通过改变num的值来改变li的类
case 38:
num--;
if (num == -2) {
num = $(".searchList li").length;
}
//通过num获取到li改变自己移除他人的激活class
$(".searchList li").eq(num).addClass("active-li").siblings().removeClass("active-li");
break;
//下键
case 40:
num++;
if (num == $(".searchList li").length-1) {
num = -1;
}
$(".searchList li").eq(num).addClass("active-li").siblings().removeClass("active-li");
break;
//回车
case 13:
//将回车 中的数据传给keyword即：搜索关键字
paramsWd = $(".searchList li").eq(num).html();
location.href = "https://www.baidu.com/s?wd="+paramsWd;
break;
default:
break;
}
})
//如果鼠标移入ul区域那么num就不再生效了
//鼠标移入清除其他激活的类
$(".searchList").bind("mouseover",function(){
num = -1;
$(".searchList li").removeClass("active-li");
});
//单击ul下面的哪个li进入哪个
$(".searchList").on("click","li",function(){
paramsWd = $(this).html();
location.href = "https://www.baidu.com/s?wd="+paramsWd;
});
//通过在input中的值enter进入百度
$(".header-search input").on("keydown",function(event){
if (event.which==13) {
paramsWd = $(this).val();
location.href = "https://www.baidu.com/s?wd="+paramsWd;
}
});
//可以将进入百度页面获取html的赋值封装成函数把val的也封装成函数
</script>
</html>
以上是关于如何使用jquery的jsonp实现仿百度下拉列表的主要内容，如果未能解决你的问题，请参考以下文章
使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作附源码和在线测试地址