                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /搜索框制作

js代碼下拉框沒有出來，大神幫看下代碼哪里有問題（新手求教~）

<!DOCTYPE html>

<html>

<head>

<title>bing 搜索框制作</title>

* {

padding: 0;

margin: 0;

}

body {

background-color: #333;

/*height: 620px;*/

}

#bg-div {

width: 1228px;

height: 600px;

background: url("river.jpg") no-repeat;

margin: 0 auto;

/*position: relative;*/

}

#search {

position: absolute;

left: 315px;

top: 200px;

}

.logo {

width: 107px;

height: 53px;

background: url("logo.png") no-repeat;

float: left;

margin: -4px 18px 0 0;

}

form {

float: left;

background-color: #fff;

/*margin-left: 15px;*/

padding: 5px;

}

input[type="text"] {

width: 300px;

height: 30px;

line-height: 30px;

outline: none;/*只有chrome點擊進入文本有輸入框輪廓outline*/

padding-left: 5px;

border: 0;

float: left;/*向左浮動與logo對齊*/

}

input[type="submit"] {

width: 29px;

height: 29px;

background: url("search-button.png") no-repeat center;

/*margin-left: -45px;*/

border: 0;

float: left;/*向左浮動與text對齊*/

cursor: pointer;/*鼠標滑過“搜索”按鈕時光標變?yōu)椤靶∈帧毙蜖?/

}

.suggest {

width: 343px;

background-color: #fff;

border: 1px solid #999;

/*display: none;*/

/*position: absolute;

top: 240px;

left: 440px;*/

}

.suggest ul {

list-style: none;

}

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

</form>

</div>

</ul>

</div>

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;//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 = element.offsetParent;

}

return actualTop;

}

addEvent('search_input', 'keyup', function () {

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';

});

</script>

</body>

</html>

IHaveADreamD

2015-12-14

源自：搜索框制作 2-7

關(guān)注問題我要回答

1224

操作

收起

1 回答

李曉健
2015-12-15

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>bing?搜索框制作</title>
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<style?type="text/css">
????????*?{
????????????padding:?0;
????????????margin:?0;
????????}
????????body?{
????????????background-color:?#333;
????????????/*height:?620px;*/
????????}
????????#bg-div?{
????????????width:?1228px;
????????????height:?600px;
????????????background:?url("river.jpg")?no-repeat;
????????????margin:?0?auto;
????????????/*position:?relative;*/
????????}
????????#search?{
????????????position:?absolute;
????????????left:?315px;
????????????top:?200px;
????????}

????????.logo?{
????????????width:?107px;
????????????height:?53px;
????????????background:?url("logo.png")?no-repeat;
????????????float:?left;
????????????margin:?-4px?18px?0?0;
????????}
????????form?{
????????????float:?left;
????????????background-color:?#fff;
????????????/*margin-left:?15px;*/
????????????padding:?5px;
????????}
????????input[type="text"]?{
????????????width:?300px;
????????????height:?30px;
????????????line-height:?30px;
????????????outline:?none;/*只有chrome點擊進入文本有輸入框輪廓outline*/
????????????padding-left:?5px;
????????????border:?0;
????????????float:?left;/*向左浮動與logo對齊*/
????????}
????????input[type="submit"]?{
????????????width:?29px;
????????????height:?29px;
????????????background:?url("search-button.png")?no-repeat?center;
????????????/*margin-left:?-45px;*/
????????????border:?0;
????????????float:?left;/*向左浮動與text對齊*/
????????????cursor:?pointer;/*鼠標滑過“搜索”按鈕時光標變?yōu)椤靶∈帧毙蜖?/
????????}
????????.suggest?{
????????????width:?343px;
????????????background-color:?#fff;
????????????border:?1px?solid?#999;
????????????/*display:?none;*/
????????????/*position:?absolute;
????????????top:?240px;
????????????left:?440px;*/
????????}
????????.suggest?ul?{
????????????list-style:?none;
????????}
????????.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?id="bg-div">
????<div?id="search">
????????<div></div>
????????<form?action=""?id="search_form">
????????????<input?type="text"?id="search_input"?placeholder="請輸入搜索內(nèi)容"?/>
????????????<input?type="submit"?value?/>
????????</form>
????</div>
</div>
<div?id="search_suggest"?class="suggest"?style="display:?none;">
????<ul?id="search_result">
????????<li>搜索結(jié)果1</li>
????????<li>搜索結(jié)果2</li>
????????<li>搜索結(jié)果3</li>
????????<li>搜索結(jié)果4</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)?{//非IE瀏覽器
????????????el.addEventListener(event,?fn,?false);
????????}?else?if(el.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;

????????if(current?!==?null)?{
????????????actualTop?+=?current.offsetTop;
????????????current?=?element.offsetParent;
????????}
????????return?actualTop;
????}
????var?search_suggest?=?getDOM('search_suggest');
????var?search_form?=?getDOM('search_form');
????addEvent('search_input',?'keyup',?function?()?{
????????search_suggest.style.top?=?getElementTop(search_form)?+?38?+?'px';
????????search_suggest.style.left?=?getElementLeft(search_form)?+?'px';
????????search_suggest.style.position?=?'absolute';
????????search_suggest.style.display?=?'block';
????});
</script>
</body>
</html>

你把 if 寫成while ?瀏覽器被你搞死好幾次