如何使用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實現仿百度下拉列表