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

老师,可以提供全部的代码吗?提供的代码和你提供的相差有点大!

老师,可以提供全部的代码吗?提供的代码和你提供的相差有点大!

正在回答

1 回答

<!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>


0 回复 有任何疑惑可以回复我~
#1

carol67351

我写的代码没错,为什么实现不了智能搜索呢?输入内容下拉框也不会出来
2016-09-27 回复 有任何疑惑可以回复我~
#2

慕仙5237505 回复 carol67351

你解决了吗,我的也是没有出现下拉狂
2017-11-23 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

老师,可以提供全部的代码吗?提供的代码和你提供的相差有点大!

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