<div class="wrapper">

<form action="" class="search-form" id="searchForm">

<input class="search-text" id="searchText" type="text" placeholder="搜索關鍵字[提示]" />

<input id="submit" class="search-submit" type="submit" value="搜索" />

</form>

<ul class="suggest" id="suggest">

<!-- <li class="suggest-item">后視鏡看韓劇</li>

<li class="suggest-item">撒的v阿薩德</li>

<li class="suggest-item">撒的v的發v</li> -->

</ul>

</div>

.wrapper,.suggest{

width: 400px;

}

.wrapper{

margin: 0 auto;

/*position: relative;*/

}

.search-form{

height: 42px;

box-sizing: border-box;

display: flex;

justify-content: space-between;

align-items: center;

}

.search-text,.search-submit{

height: 42px;

font-size: 14px;

padding: 0 6px;

box-sizing: border-box;

margin: 0;

border: none;

outline: none;

}

.search-text{

width: 80%;

color: #000;

background-color: #f0f0f0;

}

.search-submit{

width: 20%;

background-color: #4395ff;

color: #fff;

}

.suggest{

/*position: absolute;

top: 42px;

left: 0;*/

list-style-type: none;

margin: 0;

padding: 0;

box-sizing: border-box;

border: 1px solid #ccc;

border-top: none;

display: none;

}

.suggest-item{

font-size: 14px;

color: #666;

line-height: 30px;

margin: 0;

padding:6px;

box-sizing: border-box;

cursor: pointer;

}

.suggest-item:hover{

background-color: #f0f0f0;

text-decoration: underline;

}

window.onload=function(){

var searchForm=document.getElementById('searchForm'),

searchText=document.getElementById('searchText'),

suggest=document.getElementById('suggest');

/**跨瀏覽器事件處理

* 參數1:元素id

* 參數2:綁定類型事件(click keyUp keyDown)

* 參數3:響應的回調函數

*/?

var addEvent=function(id,type,handler){

var element=document.getElementById(id)||document;

if(element.addEventListener){//DOM 二級(非 IE 瀏覽器) 綁定兩個以上的事件均可拿到(alert(1) alert(2)兩個均可拿到)

element.addEventListener(type, handler, false);

}else if(element.attachEvent){//低版本瀏覽器(IE9以下)

element.attachEvent('on'+type,handler);

}else{//DOM 零級 綁定兩個以上的事件只可拿到最后一個事件(alert(1) alert(2)只拿到alert(2))

element['on'+type]=handler;//element.onclick === element['onclick']

}

};

addEvent('searchText','keyup',function(){//keyup當輸入的時候請求數據進行展示

var searchVal=searchText.value;

/* ++++++++++ jsonp實現跨域(原理：動態創建script標簽) ++++++++++ */

var url = "http://api.bing.com/qsonhs.aspx?type=cb&q=" + searchVal;

var script = document.createElement('script');

? ? ? ? script.setAttribute('src', url);

? ? ? ? // 把script標簽加入body，此時調用開始

? ? ? ? document.getElementsByTagName('body')[0].appendChild(script);

? ? ? ? suggest.style.top=getElementTop(searchForm)+42+'px';//42:輸入框的height

suggest.style.left=getElementLeft(searchForm)+'px';

suggest.style.position='absolute';

suggest.style.display='block';

});

? ? function cb(data) {

? ? ? ? var data = data.AS.Results[0].Suggests;

? ? ? ? var html = "";

? ? ? ? console.log(data);

? ? ? ? var html = "";

? ? ? ? for (var i=0;i<data.length;i++) {

? ? ? ? ? ? html += "<li class='suggest-item'>" + data[i].Txt + "</li>"

? ? ? ? }

? ? ? ? suggest.innerHTML = html;

? ? };

? ??

function getElementLeft(element){//元素距離瀏覽器左邊的距離

var actualLeft=element.offsetLeft,//offsetLeft:獲得距離父元素(瀏覽器/容器)左邊的距離?

current=element.offsetParent;

while (current!==null) {

actualLeft += current.offsetLeft;

current=current.offsetParent;

}

return actualLeft;

}

function getElementTop(element){//元素距離瀏覽器上邊的距離

var autulTop=element.offsetTop,

current=element.offsetParent;

while(current!==null){

autulTop += current.offsetTop;

current=current.offsetParent;

}

return autulTop;

}

}