原生js实现必应自动搜索功能（事件绑定和事件代理和键盘事件），亲测chrome实现

来源：互联网发布：淘宝客采集软件免费版编辑：程序博客网时间：2024/05/04 10:04
<html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta charset="utf-8" /><title>bing search</title><style type="text/css">body{background-color: #333;}.bg-div{position:relative;background-image: url(../river.jpg);width:1228px;height:690px;margin: 0 auto;}.logo{background-image: url(../logo.png);height:53px;width: 107px; float: left;margin: -4px 18px 0 0;}.search-form{float: left; background-color: #fff;padding:5px;}.search-text{height:25px;line-height: 25px;float: left;width: 350px;border: 0;outline: none;}.search-button{background-image: url(../search-button.png);width:29px;height:29px;float: left;border: 0}.search-box{position:absolute;top:150px;left: 200px; }.suggest{width:388px; background-color:#fff;position:absolute;margin:0;padding:0;border-width:1px;border-style:solid;border-color: #999;}.suggest ul{list-style:none;display:block;margin:0;padding:0}.suggest ul li {padding:3px;line-height:25px;font-size: 14px;color: #777;cursor: pointer;padding:3px;}.suggest ul li:hover{background-color:#e5e5e5;text-decoration: underline;}.suggest strong{color:#000;}</style></head><body> <div class="bg-div"> <div class="search-box"> <div class="logo"></div>  <form class="search-form" action="https://cn.bing.com/search" target="_blank" id="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-suggest" 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){ el.addEventListener(event,fn,false); } else if(el.attachEvent){ 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; }; //原生ajax var ajaxget = function(url,callback){ var xhr = null; if(window.XMLHttpRequest){ xhr = new window.XMLHttpRequest(); }else if(window.ActiveXObject){ xhr = new ActiveXObject("Msxml2.XMLHTTP"); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4&& xhr.status ==200){ callback(JSON.parse(xhr.responseText)); } } 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); } }) } var index=0; var searchDOM = getDOM("search-suggest");var searchText;var Arr = []; addEvent("search_input","keyup",function(){  searchText= getDOM("search_input").value;    Arr.push(searchText); console.log("Arr:"+ Arr[0]); ajaxget("http://api.bing.com/qsonhs.aspx?q="+Arr[0],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;searchDOM.style.top = getElementTop(getDOM("search-form"))+38+'px'; searchDOM.style.left = getElementLeft(getDOM("search-form"))+'px';// console.log(getElementLeft(getDOM("search-form"))); searchDOM.style.position = "absolute"; searchDOM.style.display = "block"; //按上下键事件var num=getDOM("search-result").childNodes.length;   this.onkeyup = function(e){// e.preventDefault ? e.preventDefault():(e.returnValue = false);   if(e.keyCode==40){   console.log("down:"+index);   // console.log(num);index++;getDOM("search-result").childNodes[index-1].style.backgroundColor = "#e5e5e5";getDOM("search-result").childNodes[index-1].style.textDecoration = "underline";getDOM("search_input").value = d[index-1].Txt;if(index==num){index = 0;}console.log("after:"+index);console.log(d[index-1].Txt);   }else if(e.keyCode==38){   index--;   console.log("up:"+ index);   if(index >0&&index < num){     getDOM("search-result").childNodes[index-1].style.backgroundColor = "#e5e5e5";   getDOM("search-result").childNodes[index-1].style.textDecoration = "underline";   getDOM("search_input").value = d[index-1].Txt;// index--;   }   if(index==-1){   getDOM("search-result").childNodes[num-2].style.backgroundColor = "#e5e5e5";   getDOM("search-result").childNodes[num-2].style.textDecoration = "underline";   getDOM("search_input").value = d[num-2].Txt;   index = num-1;   }   console.log(d[index-1].Txt);   }   }  });  }); delegateEvent("li","click",function(){ var keyword = this.innerHTML; location.href = 'https://cn.bing.com/search?q='+keyword; }); </script></body></html>
0 0