实现过程参考自 慕课网,有关具体详情可参考视频。
实现必应搜索制作,结果如下:
点击提示框中的选项进行对应的跳转(在当前页面):
使用Ajax提交http请求,从必应获取提示数据。在使用Ajax请求时,需要注意:Ajax发送请求的url地址与服务器地址必须是同一域名下。为了处理这里出现的跨域问题,采用jsonp方式(jsonp可用于解决主流浏览器的跨域数据访问的问题)。
使用 jQuery 实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery制作Bing搜索框-v2.0</title>
<!-- 兼容性视图 -->
<!-- 浏览器的文档模式是以最新版本的IE的文档模式来渲染的 -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<style>
body {
background-color: #333;
}
.bg-div {
width: 1228px;
height: 690px;
margin: 0 auto;
background-image: url(images/river.jpg);
position: relative;
}
.logo {
width: 107px;
height: 53px;
background-image: url(images/logo.png);
float: left;
margin: -4px 18px 0 0;
}
form {
float: left;
background-color: #fff;
padding: 5px;
}
.search-text {
border: 0;
float: left;
height: 25px;
line-height: 25px;
outline: none; /* 去除轮廓 */
width: 350px;
}
.search-button {
border: 0;
width: 29px;
height: 29px;
background-image: url(images/search-button.png);
float: left;
}
.search-box {
position: absolute;
top: 200px;
left: 300px;
}
/* 搜索提示 */
.suggest {
width: 388px;
background-color: #fff;
border: 1px solid #999;
}
.suggest ul {
list-style: none;
margin: 0;
padding: 0;
}
.suggest ul li {
padding: 3px;
font-size: 14px;
line-height: 25px;
cursor: pointer;
}
.suggest ul li:hover {
background-color: #e5e5e5;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form class="search-form" action="https://cn.bing.com/search" id="search-form">
<input type="text" class="search-text" name="q" id="search_input" autocomplete="off">
<input type="submit" value="" class="search-button">
</form>
</div>
</div>
<div class="suggest" id="search-suggest" style="display: none">
<ul id="search-result">
<!--<li>搜索结果1</li>
<li>搜索结果2</li>
<li>搜索结果3</li>-->
</ul>
</div>
<!--<script src="jquery.min.js"></script>-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$('#search_input').bind("keyup", function() {
// 如: http://api.bing.com/qsonhs.aspx?q=2&o=a+ds+ds+h+p
var jqueryInput = $(this);
var searchText = jqueryInput.val();
// 为解决js同源策略出现的问题,进行修改
/*$.get('http://api.bing.com/qsonhs.aspx?q='+searchText, function(d) {
var d = d.AS.Results[0].Suggests;
var html = '';
for(var i = 0; i < d.length; i++) {
html += '<li>'+d[i].Txt+'</li>';
}
$('#search-result').html(html);
$('#search-suggest').show().css({
position: "absolute",
top: $('#search-form').offset().top + $('#search-form').height() + 10,
left: $('#search-form').offset().left
});
}, 'json');*/
if(searchText) {
$.ajax({
type:"GET",
url:"http://api.bing.com/qsonhs.aspx?type=cb&q="+searchText,
dataType:'jsonp',
jsonp:'cb',
success: function(d) {
var d = d.AS.Results[0].Suggests;
var html = '';
for(var i = 0; i < d.length; i++) {
html += '<li>'+d[i].Txt+'</li>';
}
$('#search-result').html(html);
$('#search-suggest').show().css({
position: "absolute",
// offset().top 取得元素距浏览器顶部的距离(除工具栏)
// offset().left 取得元素距浏览器左边的距离
top: $('#search-form').offset().top + $('#search-form').height() + 10,
left: $('#search-form').offset().left
});
},
error: function() {
console.log("error");
}
});
} else {
$('#search-suggest').hide();
}
});
//点击空白处,提示框消失
$(document).bind('click', function() {
$("#search-suggest").hide();
});
//为多个元素且由javascript动态生成的元素添加事件时使用事件代理
// 为动态生成的提示框中的“li”使用事件代理
/*$(document).delegate('#search-suggest li','click', function() {
var keyword = $(this).text();
location.href = 'http://cn.bing.com/search?q='+keyword;
});*/
//delegate 已经不建议使用了,推荐使用 $(document).on('click','li',function (){});
$(document).on('click', '#search-suggest li', function() {
var keyword = $(this).text();
location.href = 'http://cn.bing.com/search?q='+keyword;
});
</script>
</body>
</html>
可参考: 处理跨域: http://blog.csdn.net/zhouyusong_bupt/article/details/49493495
使用javascript实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用javascript制作Bing搜索框-v2.0</title>
<!-- 兼容性视图 -->
<!-- 浏览器的文档模式是以最新版本的IE的文档模式来渲染的 -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<style>
body {
background-color: #333;
}
.bg-div {
width: 1228px;
height: 690px;
margin: 0 auto;
background-image: url(images/river.jpg);
position: relative;
}
.logo {
width: 107px;
height: 53px;
background-image: url(images/logo.png);
float: left;
margin: -4px 18px 0 0;
}
form {
float: left;
background-color: #fff;
padding: 5px;
}
.search-text {
border: 0;
float: left;
height: 25px;
line-height: 25px;
outline: none; /* 去除轮廓 */
width: 350px;
}
.search-button {
border: 0;
width: 29px;
height: 29px;
background-image: url(images/search-button.png);
float: left;
}
.search-box {
position: absolute;
top: 200px;
left: 300px;
}
/* 搜索提示 */
.suggest {
width: 388px;
background-color: #fff;
border: 1px solid #999;
}
.suggest ul {
list-style: none;
margin: 0;
padding: 0;
}
.suggest ul li {
padding: 3px;
font-size: 14px;
line-height: 25px;
cursor: pointer;
}
.suggest ul li:hover {
background-color: #e5e5e5;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form class="search-form" action="https://cn.bing.com/search" id="search-form">
<input type="text" class="search-text" name="q" id="search_input" autocomplete="off">
<input type="submit" value="" class="search-button">
</form>
</div>
</div>
<div class="suggest" id="search-suggest" style="display: none">
<ul id="search-result">
<!--<li>搜索结果1</li>
<li>搜索结果2</li>
<li>搜索结果3</li>-->
</ul>
</div>
<script>
var getDOM = function(id) {
return document.getElementById(id);
};
// 添加事件
var addEvent = function(id, event, fn) {
var el = getDOM(id) || document;
if(el.addEventListener) {
el.addEventListener(event, fn, false);
} else if(el.attachEvent) {
el.attachEvent('on'+evevt, fn);
} else {
el['on'+event] = fn;
}
};
// offsetLeft 属性是获取元素距父元素左边的距离,同理offsetTop。
// 为获取元素距浏览器左边的距离,自定义函数 getElementLeft,而在jQuery使用 offset().left 方法即可。
var getElementLeft = function(element) {
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while(current != null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
};
//同 getElementLeft 函数,自定义 getElementTop 函数
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();
} else if(window.ActiveXObject) {
xhr = new window.ActiveXObject();
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
callback(JSON.parse(xhr.responseText));
}
};
xhr.open('get',url,true);
/* open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)*/
xhr.send();
};
addEvent('search_input','keyup', function() {
var searchText = getDOM('search_input').value;
if(searchText) {
ajaxGet("http://api.bing.com/qsonhs.aspx?type=cb&q="+searchText, function(d) {
var d = d.AS.Results[0].Suggests;
var html = '';
for(var i = 0; i < d.length; i++) {
html += '<li>' + d[i].Txt + '</li>';
}
var ss = getDOM('search-suggest');
ss.innerHTML = html;
ss.style.top = getElementTop(getDOM('search-form')) + 38 + 'px';
ss.style.left = getElementLeft(getDOM('search-form')) + 'px';
ss.style.position = 'absolute';
ss.style.display = 'block';
});
} else {
getDOM('search-suggest').style.display = 'none'
}
});
//为解决js同源策略问题,需要修改上面代码
//为JS动态生成的网页元素添加入事件时,通常需要使用事件代理来实现
var delegateEvent = function(target, event, fn) {
addEvent(document, event, function(e) {
if(e.target.nodeName == target.toUpperCase()) {
fn.call(e.target);
}
});
};
delegateEvent('li', 'click', function() {
var keyword = this.innerHTML;
location.href = 'http://cn.bing.com/search?q='+keyword;
});
addEvent("", "click", function() {
getDOM('search-suggest').style.display = 'none';
});
</script>
</body>
</html>
在控制台进行测试,出现:
修改:解决跨域问题
<script>
var getDOM = function(id) {
return document.getElementById(id);
};
// 添加事件
var addEvent = function(id, event, fn) {
var el = getDOM(id) || document;
if(el.addEventListener) {
el.addEventListener(event, fn, false);
} else if(el.attachEvent) {
el.attachEvent('on'+evevt, fn);
} else {
el['on'+event] = fn;
}
};
// offsetLeft 属性是获取元素距父元素左边的距离,同理offsetTop。
// 为获取元素距浏览器左边的距离,自定义函数 getElementLeft,而在jQuery使用 offset().left 方法即可。
var getElementLeft = function(element) {
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while(current != null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
};
//同 getElementLeft 函数,自定义 getElementTop 函数
var getElementTop = function(element) {
var actualTop = element.offsetTop;
var current = element.offsetParent;
while(current != null) {
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
};
//为解决js同源策略问题,修改上面代码
var ajaxGet = function(url) {
var JSONP = document.createElement("script");
JSONP.src = url;
document.getElementsByTagName("body")[0].appendChild(JSONP);
};
var callback = function(d) {
if(d.AS.Results) {
d = d.AS.Results[0].Suggests;
}
var html = '';
for(var i = 0; i < d.length; i++) {
html += '<li>' + d[i].Txt + '</li>';
}
getDOM('search-result').innerHTML = html;
var ss = getDOM('search-suggest');
ss.style.top = getElementTop(getDOM('search-form')) + 38 + 'px';
ss.style.left = getElementLeft(getDOM('search-form')) + 'px';
ss.style.position = 'absolute';
ss.style.display = 'block';
var jsonp = document.getElementsByTagName('body')[0].getElementsByTagName('script');
if(jsonp) {
for(var i = 1; i < jsonp.length; i++) {
if(jsonp[i]) {
jsonp[i].parentNode.removeChild(jsonp[i]);
//console.log(jsonp[i]);
}
}
}
};
//为JS动态生成的网页元素添加入事件时,通常需要使用事件代理来实现
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;
if(searchText) {
ajaxGet("http://api.bing.com/qsonhs.aspx?type=cb&cb=callback&q="+searchText);
} else {
getDOM('search-suggest').style.display = 'none';
}
});
delegateEvent('li', 'click', function() {
var keyword = this.innerHTML;
location.href = 'http://cn.bing.com/search?q='+keyword;
});
addEvent("", "click", function() {
getDOM('search-suggest').style.display = 'none';
});
</script>