必应搜索框制作 搜索提示 jQuery及JavaScript实现
2017-08-11 17:10
591 查看
注：学习慕课网前端开发课程《搜索框的制作》搜索提示
jQuery及JavaScript实现
利用fiddler工具将文件放到某域下进行调试 利用fiddler将本地网页放到某个域下
1、jQuery实现
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>
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript和JQuery实现必应搜索
- 使用jQuery、js实现必应搜索制作
- jquery实现自动提示的文本框（仿baidu,google搜索)
- JavaScript和jQuery实现淘宝搜索栏的制作
- jquery实现搜索提示效果
- jquery autocomplete 实现搜索提示功能，中文/拼音也没问题
- asp.net使用jquery实现搜索框默认提示功能
- asp.net使用jquery实现搜索框默认提示功能
- jquery实现联想词搜索框和搜索结果分页
- jQuery实现自动提示，分类选择等功能的搜索框
- chosen.jquery.js 搜索框实现模糊搜索 chosen-select
- 用Jquery实现模仿Google 搜索提示功能
- jquery autocomplete 实现搜索提示功能，中文/拼音也没问题
- 基于javascript实现的搜索时自动提示功能
- jquery实现搜索框提示文字显示隐藏
- jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
- jQuery插件-jgcharts实现Javascript制作Google Charts
- 让input框实现类似百度的搜索提示(基于jquery事件监听)
- 基于javascript实现的搜索时自动提示功能