老师，可以提供全部的代码吗？提供的代码和你提供的相差有点大！
林中路
2015-05-14 10:59
老师，可以提供全部的代码吗？提供的代码和你提供的相差有点大！
1回答
-
- 盒盒
- 2016-03-09 02:00:09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>必应搜索</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body {
background-color: #333;
}
.bgimg {
background-image: url(images/river.jpg);
width: 1350px;
height: 650px;
margin: 0 auto;
position: relative;
}
.logo {
background-image: url(images/logo.png);
width: 107px;
height: 53px;
float: left;
margin: -6px 10px 0 0;
}
form {
float: left;
background-color: white;
padding: 5px;
}
.input-box {
border: 0;
float: left;
height: 29px;
line-height: 29px;
outline: none;
width: 350px;
font-size: 18px;
}
.input-submit {
border: 0;
background-image: url(images/search-button.png);
width: 29px;
height: 29px;
float: left;
cursor: pointer;
}
.search-box {
position: absolute;
left: calc(50% - 300px);
top: calc(50% - 29px);
}
#suggest {
background: #fff;
font-size: 18px;
position: absolute;
border: 1px solid #999;
display: none;
}
#suggest ul {
padding: 0;
margin: 0;
}
#suggest ul li {
list-style-type: none;
padding: 5px;
width: 378px;
line-height: 25px;
}
#suggest ul li:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<div>
<div>
<div></div>
<form id="search-form" action="https://cn.bing.com/search" target="_blank">
<input type="text" id="box" autocomplete="off" />
<input type="submit" value="" />
</form>
</div>
</div>
<div id="suggest">
<ul id="search-result">
<li>搜索结果1</li>
<li>搜索结果2</li>
<li>搜索结果3</li>
<li>搜索结果4</li>
</ul>
</div>
</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) { //非IE浏览器
el.addEventListener(event,fn,false);
}else if(el.attachEvent){ //IE浏览器
el.attachEvent("on" + event, fn);
}
};
var getElementLeft = function(element) {
var actualLeft = element.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) { //非IE浏览器
_xhr = new XMLHttpRequest();
}else if(window.ActiveXObject) { //IE浏览器
_xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
_xhr.onreadystatechange = function() {
if (_xhr.reayState == 4 && _xhr.state == 200) {
callback(JSON.parse(_xhr.responseText));
//json.pase把字符串转换为js可以识别的对象
}
};
_xhr.open("get", url, false);
_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('box', 'keyup', function() {
var searchText = getDOM("box").value;
ajaxGet("http://api.bing.com/qsonhs.aspx?q=" + searchText, function(d) {
var d = d.AS.Result[0].Suggests;
var html = "";
for (var i=0; i<d.length; i++) {
html += "<li>" + d[i].Txt + "</li>";
}
});
var _dom = getDOM("suggest");
getDOM("search-result").innerHTML = html;
_dom.style.left = getElementLeft(getDOM("search-form")) + "px";
_dom.style.top = getElementTop(getDOM("search-form")) + 38 + "px";
_dom.style.position = "absolute";
_dom.style.display = "block";
delegateEvent("li", "click", function() {
var keyword = this.innerHTML;
location.href = "http://cn.bing.com/search?q=" + keyword;
});
});
</script>
搜索框制作
66064 学习 · 431 问题