HTML是网页设计中的重要一环,百度搜索提示窗口则是网页设计中常用的功能之一。这里我们介绍一下关于如何实现百度搜索的提示窗口。
<input id="inputArea" type="text" onkeydown="keyDown(event)"> <ul id="suggestBox"></ul>
首先,我们需要定义一个input元素,用于输入搜索关键词,同时我们需要定义一个ul元素作为提示窗口的容器。其中,id属性分别为inputArea和suggestBox。
<script> function keyDown(event){ var keyCode=event.keyCode; var suggestBox=document.getElementById("suggestBox"); var inputValue=document.getElementById("inputArea").value; if(keyCode==40){//向下箭头 if(suggestBox.style.display!="none"){ var activeLi=suggestBox.querySelector(".active"); if(activeLi){ if(activeLi.nextSibling){ activeLi.nextSibling.className="active"; activeLi.className=""; } }else{ suggestBox.children[0].className="active"; } } }else if(keyCode==38){//向上箭头 if(suggestBox.style.display!="none"){ var activeLi=suggestBox.querySelector(".active"); if(activeLi){ if(activeLi.previousSibling){ activeLi.previousSibling.className="active"; activeLi.className=""; } }else{ suggestBox.children[suggestBox.children.length-1].className="active"; } } }else if(keyCode==13){//回车键 var activeLi=suggestBox.querySelector(".active"); if(activeLi){ inputValue=activeLi.innerHTML; } window.location.href="http://www.baidu.com/s?wd="+inputValue; }else{//其它键 if(inputValue!=""){ suggestBox.innerHTML=""; suggestBox.style.display="block"; var script=document.createElement("script"); script.src="http://suggestion.baidu.com/su?wd="+inputValue+"&cb=callback"; document.body.appendChild(script); }else{ suggestBox.style.display="none"; } } } function callback(data){ var suggestBox=document.getElementById("suggestBox"); for(var i=0;i<data.s.length;i++){ var li=document.createElement("li"); li.innerHTML=data.s[i]; suggestBox.appendChild(li); } } </script>
这是实现百度搜索提示窗口的JS代码。其中,我们需要使用window.onload来确保HTML页面已经加载完毕。同时,定义了一个keyDown函数,用于判断用户输入的键盘事件。当用户输入回车键时,我们将跳转至相关搜索结果页面。当用户输入其它键时,我们将使用callback函数,调用百度的suggestion接口,将返回的结果添加至suggestBox元素中。