注：學習慕課網前端開發課程《搜索框的製作》搜索提示 jQuery及JavaScript實現
利用fiddler工具將文件放到某域下進行調試 利用fiddler將本地網頁放到某個域下
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<title>bing search</title>
<style type="text/css">
body{background-color: #333;margin:0;padding:0;}
.bg-div{position:relative;background: url(river.jpg) left top no-repeat;background-size:cover;width:100%;height:100%;margin: 0 auto;}
.logo{background-image: url(logo.png);height:53px;width: 107px; float: left;margin: -4px 18px 0 0;}
.search-form{float: left; background-color: #fff;padding:5px;}
.search-text{height:25px;line-height: 25px;float: left;width: 350px;border: 0;outline: none;}
.search-button{background-image: url(search-button.png);width:29px;height:29px;float: left;border: 0}
.search-box{position:absolute;top:150px;left: 200px; }
.suggest{width:388px; background-color:#fff;position:absolute;margin:0;padding:0;border-width:1px;border-style:solid;border-color: #999;}
.suggest ul{list-style:none;display:block;margin:0;padding:0}
.suggest ul li {padding:3px;line-height:25px;font-size: 14px;color: #777;cursor: pointer;padding:3px;}
.suggest ul li:hover{background-color:#e5e5e5;text-decoration: underline;}
.suggest strong{color:#000;}
.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0px;}
.clearfix{zoom:1}
.nav{margin:0 auto; width:1228px;}
.nav ul{list-style:none;margin:0;padding:0;}
.nav ul li{float:left;padding:10px;}
.nav ul li a{color:#999; text-decoration:none;font-size:12px; font-weight:bold;}
a:hover {text-decoration: underline;}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li><a href="#">圖片</a></li>
<li><a href="#">視頻</a></li>
<li><a href="#">詞典</a></li>
<li><a href="#">諮詢</a></li>
<li><a href="#">地圖</a></li>
<li><a href="#">影響力</a></li>
<li><a href="#">更多</a></li>
</ul>
</div>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form class="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form">
<input type="text" class="search-text" name="q" id="search_input" autocomplete="off"/>
<input type="submit" class="search-button" value=""/>
</form>
</div>
</div>
<div class="suggest" id="search-suggest" style="top: 227px; left: 325px; position: absolute;">
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</body>
</html>
1、jQuery實現
<script>
$('#search_input').click(function(e){
var e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else if(window.event){
window.event.cancelBubble = true;//兼容IE
}
$('#search-suggest').show();
});
$('#search_input').bind('keyup',function(){
var searchText=$('#search_input').val();
$.get('http://cn.bing.com/AS/Suggestions?pt=page.home&mkt=zh-cn&qry='+searchText+'&cp=1&cvid=BCA9094E94944E14A2710F627C260083',function(d){
$('#search-suggest').html(d);
$('#search-suggest').show();
});
});
$(document).bind('click',function(){
$('#search-suggest').hide();
});
$(document).delegate('li','click',function(){
var keyword=$(this).text();
location.href='http://cn.bing.com/search?q='+keyword+'&qs=AS&pq=a&sc=8-1&cvid=56A69109311546A2AF01AA208181CD32&FORM=QBLH&sp=1';
});
</script>2、JavaScript實現
<script>
var getDOM=function(id){
return document.getElementById(id);
}
var addEvent=function(id,event,fn){
var el=getDOM(id)||document;
if(el.addEventListener){//addEventListener適用於非IE瀏覽器
el.addEventListener(event,fn,false);
}else if(el.attachEvent){//attachEvent適用於IE瀏覽器
el.attachEvent('on'+event,fn);
}
}
var getElementLeft=function(element){
var actualLeft=element.offsetLeft;//offsetLeft獲得距離父元素左邊的距離
var current=element.offsetParent;
while(current!==null){
actualLeft+=current.offsetLeft;
current=current.offsetParent;
}
return actualLeft;
}
var getElementTop=function(element){
var actualTop=element.offsetTop;
var current=element.offsetParent;
while(current!==null){
actualTop+=current.offsetTop;
current=current.offsetParent;
}
return actualTop;
}
var ajaxGet=function(url,callback){
var _xhr=null;
if(window.XMLHttpRequest){
_xhr=new window.XMLHttpRequest();//非IE瀏覽器
}else if(window.ActiveXObject){
_xhr=new ActiveXObject("Msxml2.XMLHTTP");
}
_xhr.onreadystatechange=function(){
if(_xhr.readyState==4&&_xhr.status==200){//服務器正常響應並返回信息
callback(_xhr.responseText);//JSON.parse()把字符串轉化爲JS可以識別的對象
}
}
_xhr.open('get',url,true);
_xhr.send(null);
}
var delegateEvent=function(target,event,fn){
addEvent(document,event,function(e){
if(e.target.nodeName==target.toUpperCase()){
fn.call(e.target);
}
});
}
addEvent('search_input','keyup',function(){
var searchText=getDOM('search_input').value;
ajaxGet('http://cn.bing.com/AS/Suggestions?pt=page.home&mkt=zh-cn&qry='+searchText+'&cp=1&cvid=BCA9094E94944E14A2710F627C260083',function(d){
getDOM('search_suggest').innerHTML=d;
getDOM('search_suggest').style.top=getElementTop(getDOM('search_form'))+38+'px';
getDOM('search_suggest').style.left=getElementLeft(getDOM('search_form'))+'px';
getDOM('search_suggest').style.position='absolute';
getDOM('search_suggest').style.display='block';
});
});
delegateEvent('li','click',function(){
var keyword=this.innerHTML;
keyword=keyword.replace(/<.*?>/ig,"");
location.href='http://cn.bing.com/search?q='+keyword+'&qs=AS&pq=a&sc=8-1&cvid=56A69109311546A2AF01AA208181CD32&FORM=QBLH&sp=1';
});
</script>