<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{background-color: #333;}
.big-img{background-image: url(img/river.jpg); background-repeat: no-repeat; width:1228px;height:690px;margin: 0 auto;position: relative;}
.logo{background: url(img/logo.png)left top no-repeat;width: 107px;height: 53px; float: left;margin: -4px 18px 0 0;}
.formSearch{float: left; background-color: #FFFFFF; padding: 5px;}
.formSearch input{float: left;}
.inputText{height: 25px;line-height: 25px; width: 350px; border: 0;outline: none;font-size: 18px;}
.inputButton{height: 25px;line-height: 25px;border: 0;width: 29px;height: 29px;background: url(img/search-button.png) left top no-repeat;}
.searchBox{margin: 150px 0 0 200px;position: absolute;}
.searchTip{ width: 388px; background-color: #FFFFFF;border: 1px solid #999;}
.searchTip ul{list-style: none; margin: 0;padding: 0;}
.searchTip ul li{padding: 3px; font-size: 14px;line-height: 25px;cursor: pointer;}
.searchTip ul li:hover{background-color: #e5e5e5; text-decoration: underline;}
</style>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
</head>
<body>
<div class="big-img">
<div class="searchBox">
<div class="logo">
</div>
<form class="formSearch" id="searchForm" action="https://cn.bing.com/search" method="get" target="_blank">
<input type="text" class="inputText" id="searchInput" name="q" autocomplete="off"/>
<input type="submit" value="" class="inputButton"/>
</form>
</div>
</div>
<div class="searchTip" id="searchIdTip" style="display: none;">
<ul id="searchResult">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
var d,len,result;
var Arr = [];
var searchText;
var callback=function(d){
// alert(d.length);
len = d.length;
result = d;
// console.log(len);
}
$("#searchInput").bind("keyup",function(){
searchText = $("#searchInput").val();
Arr.push(searchText);
$.ajax({
type:"get",
url:'http://api.bing.com/qsonhs.aspx?q='+Arr[0],
async:false,
dataType:"json",
success:function(d){
d = d.AS.Results[0].Suggests;
var html = '';
for(var i = 0;i<d.length;i++){
html+="<li>"+d[i].Txt+"</li>"
}
$("#searchResult").html(html);
$("#searchIdTip").show().css({
top:$("#searchForm").offset().top + $("#searchForm").height()+10,
left:$("#searchForm").offset().left,
position:"absolute"
});
callback(d);
}
});
});
var index=0;
$("#searchInput").keyup(function(e){
if(e.keyCode == 40){
index++;
$("#searchResult li").eq(index-1).css("background-color","#e5e5e5");
$("#searchResult li").eq(index-1).css("text-decoration","underline");
// console.log(result[index-1].Txt);
$("#searchInput").val(result[index-1].Txt);
if(index==len){
index = 0;
}
}else if(e.keyCode == 38){
index--;
// console.log(index);
if(index == -1){
index = len-1;
}
$("#searchResult li").eq(index-1).css("background-color","#e5e5e5");
$("#searchResult li").eq(index-1).css("text-decoration","underline");
$("#searchInput").val(result[index-1].Txt);
}
})
$(document).bind("click",function(){
$('#searchIdTip').hide();
});
$("#searchResult").delegate("li","click",function(){
var keyword = $(this).text();
location.href = 'https://cn.bing.com/search?q='+keyword;
});
</script>
</body>
</html>
jquery實現必應的自動下拉搜索功能
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章