淘先锋技术网

首页 1 2 3 4 5 6 7

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元素中。