为了账号安全,请及时绑定邮箱和手机立即绑定

我的js不出效果,麻烦各位帮我看看哪里有问题

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Bing search</title>

<style>

body{

background-color: #333;

}

.bg-div{

position: relative;

background-image: url(img/river.jpg);

width: 1228px;

height: 690px;

margin: 0 auto;

}

.logo{

background-image: url(img/logo.png);

width: 107px;

height: 53px;

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{

cursor: pointer;

border: 0;

background-image: url(img/search-button.png);

width: 29px;

height: 29px;

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{

text-decoration: underline;

background-color: #e5e5e5;

}

</style>

</head>

<body>

<div class="bg-div">

<div class="search-box">

<div class="logo"></div>

<form action="https://cn.bing.com/search" target="_blank" id="search-form" class="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-suggeset" style="display: none;">

<ul id="search-result">

<li>搜索结果1</li>

<li>搜索结果2</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){ //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(); //XMLHttpRequest适用于非IE浏览器

}else if(window.ActiveXObject){

_xhr = new ActiveXObject("Msxml2.XMLHTTP"); //ActiveXObject适用于IE浏览器

}

_xhr.onreadystatechange = function(){

if(_xhr.readyState == 4 && _xhr.status == 200){ //当readyState==4并且status==200时,表示服务器正确响应并返回信息

callback(JSON.parse(_xhr.responseText));

//JSON.parse()的作用是把字符串转化为JS可以识别的对象

}

}

_xhr.open("get",url,false); //要使用AJax技术,第三个参数必须设置为false

_xhr.send(null);

}

addEvent("search-input","keyup",function(){

var searchText = getDom("search-input").value;

ajaxGet('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>";

}

getDom("search-result").innerHTML = html;

getDom("search-suggeset").style.top = getElementTop(getDom("search-form"))+38+"px";

getDom("search-suggeset").style.left = getElementLeft(getDom("search-form"))+"px";

getDom("search-suggeset").style.position = "absolute";

getDom("search-suggeset").style.display = "block";

})

})

</script>

</body>

</html>


正在回答

举报

0/150
提交
取消
搜索框制作
  • 参与学习       66065    人
  • 解答问题       431    个

本课程从简入深讲解搜索框的制作,学习JQ与JS实现Ajax技术的不同点

进入课程

我的js不出效果,麻烦各位帮我看看哪里有问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信