如何使用jquery的jsonp實現仿百度下拉列表
使用了mui佈局，能夠換佈局，這個不重要，重要的是怎麼實現的javascript
<!doctype html>css
<html>html
<head>java
<meta charset="UTF-8">jquery
<title></title>ajax
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />json
<link href="css/mui.min.css" rel="stylesheet" />app
<style type="text/css">async
//修改樣式的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>
- 1. 使用Jquery UI 高仿百度搜索下拉列表功能
- 2. jQuery如何實現jsonp調用
- 3. Jquery實現下拉列表聯動
- 4. jquery+css實現下拉列表（更新）
- 5. AngularJS 使用ngOption實現下拉列表
- 6. JSONP跨域實現百度下拉搜索跳轉
- 7. vue 1.x 交互－仿百度下拉列表
- 8. jQuery實現仿淘寶下拉菜單
- 9. 用jquery實現Jsonp
- 10. 模仿 百度的查詢下拉框
- 更多相關文章...
- • XSD 如何使用? - XML Schema 教程
- • ionic 下拉刷新 - ionic 教程
- • ☆基於Java Instrument的Agent實現
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。