下午做了个“自动补全”的小例子-优快云博客

本文介绍了一个仿照Google自动补全功能的实现方案，利用HTML、CSS和JavaScript结合后台处理程序(Ashx)实现输入框的文字建议功能。具体包括前端用户界面的设计、文字建议的动态展示以及与服务器端的数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML、CSS、JS部分代码

Code:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>模仿google自动补全</title>
<scriptsrc="../Scripts/jquery-1.4.2-vsdoc.js"type="text/javascript"></script>
<scripttype="text/javascript">
varhighlightIndex=-1;//定义高亮提示节点的索引值
vartimeOutID;//定义延时时间id
$(function(){
varinput=$("#input");
varinputinputOffset=input.offset();
//装载时隐藏自动补全的提示框,并设置其基本样式（宽度，定位，边框...）
$("#auto").hide().css("border","1pxblacksolid").css("position","absolute")
.css("top",inputOffset.top+input.width+"px")
.css("left",inputOffset.left+"px").width(input.width()+3);
$("#search").click(function(){
alert('你输入的内容是【'+$("#input").val()+'】已经提交的服务器');
})
//给文本框注册键盘按下并弹起的事件
input.keyup(function(event){
//处理文本框中键盘按下事件
varmyEvent=event||window.event;
varkeyCode=myEvent.keyCode;//获取按下键盘的键值
//输入的是英文，或退格键、del键，应该将输入的信息提交给服务器端
if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){
//1.获取文本框中内容
varinputinputVal=input.val();
//2.将输入的信息发送给服务器端
if(inputVal!=""){
//如果输入的信息不为空，则提交给服务器
clearTimeout(timeOutID);//对上次未完成的延时进行取消
//使用延时，避免频繁交互影响服务器端性能
timeOutID=setTimeout(function(){
$.post("AutoComplete.ashx",{input:inputVal},function(data){
//将data数据转换为jQuery对象
varjQueryObj=$(data);
//找到服务端返回的xml数据的所有input节点
varinputNodes=jQueryObj.find("input");
//遍历所有的input节点，取出单词内容，并将单词内容添加到提示框中
//在添加之前，先将提示框内容清除掉，避免重复
$("#auto").html("");
inputNodes.each(function(i){
//遍历解析XML，获取单个节点
varinputContent=$(this);
//新建div节点，将单词的内容添加到该节点
//再将新添加的div节点拼接到提示框div中
varnewDivNod=$("<div>").attr("id",i);//定义新节点并给其赋id（索引）
newDivNod.html(inputContent.text()).appendTo($("#auto"));
newDivNod.hover(
//鼠标进入
function(){
if(highlightIndex!=-1){
//如果有高亮节点，就取消当前的高亮节点，让其背景色变白
$("#auto").children("div").eq(highlightIndex).css("background-color","white");
}
//让鼠标进入的那个节点高亮显示
highlightIndex=$(this).attr("id");//将当前节点的id（其实是索引），赋值给高亮节点的索引
$(this).css("background-color","red");
},//鼠标离开
function(){
$(this).css("background-color","white");
//highlightIndex=-1;
});
//点击该高亮节点，直接将该节点的文本内容提交
newDivNod.click(function(){
$("#input").val($(this).text());
$("#auto").hide();
alert('你输入的内容是【'+$(this).text()+'】已经提交的服务器');
})
})
//如果服务器端有返回数据，就将提示框显示
if(inputNodes.length>0){
$("#auto").show();
}else{
$("#auto").hide();
}
},"xml");
},500)
}else{
$("#auto").hide();//如果输入框的内容为空，隐藏提示框
}
}elseif(keyCode==38||keyCode==40){
//如果按的是向上键38或向下键40
if(keyCode==38){
//向上
varautoNodes=$("#auto").children("div");//获取提示框中的全部提示内容--div子节点
if(highlightIndex!=-1){
//如果原来存在高亮节点，则将背景色改为白色
autoNodes.eq(highlightIndex).css("background-color","white");
highlightIndex--;//索引值自减
}else{
highlightIndex=autoNodes.length-1;
}
if(highlightIndex==-1){
//如果索引值为-1后，将索引值指回最后一个元素节点，让最后一个元素高亮
highlightIndex=autoNodes.length-1;
};
//让现在高亮的节点背景色变成红色
autoNodes.eq(highlightIndex).css("background-color","red");
//获取高亮节点的文本内容,并赋给文本框
vartxtVal=$("#auto").children("div").eq(highlightIndex).text();
$("#input").val(txtVal);
}
else{
//向下
varautoNodes=$("#auto").children("div");
if(highlightIndex!=-1){
autoNodes.eq(highlightIndex).css("background-color","white");
}
highlightIndex++;
if(highlightIndex==autoNodes.length){
highlightIndex=0;
}
autoNodes.eq(highlightIndex).css("background-color","red");
vartxtVal=$("#auto").children("div").eq(highlightIndex).text();
$("#input").val(txtVal);
}
}elseif(keyCode==13){
//如果按下的是回车
alert('你输入的内容是【'+$("#input").val()+'】已经提交的服务器');
$("#auto").hide();//让提示框隐藏
//让文本框失去焦点(避免循环弹框)
$("#input").get(0).blur();
}
})
})
</script>
</head>
<body>
<center>
<inputtype="text"id="input"/>
<inputtype="button"value="想知道，就丁浪一下"id="search"/><br/>
</center>
<divid="auto"></div>
</body>
</html>