jQuery模仿google的自动完成代码
jQuery实现模仿google的自动提示，功能不太通用，算是只提供一个学习jQuery的示例吧。
其实，做这个功能，用jQuery不难做，难点是样式我不会写，所以样式很丑，望见谅。
前端的html代码：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery autoConplete</title>
<script language="javascript" src="jquery.js"></script>
<style type="text/css">
* {margin: 0px;padding: 0px;}
body {
text-align: center;
padding-top: 100px;
font-size: 12px;
}
table {margin: auto;}
#Keyword {width: 350px;}
div#content {position: relative;}
div#smallContent {position: absolute;width: 352px;left: 0px;top: 20px;}
div#smallContent ul {border: 1px solid #000000;text-align: left;}
div#smallContent li {
position: relative;
width: 100%;
background-color: #FFFFFF;
cursor: default;
line-height: 18px;
text-indent: 2px;
font:"宋体" 12px;
}
div#smallContent li.hov {background-color: #3333CC;color: #FFFFFF;}
div#smallContent li.hov span {color: #FFFFFF;}
div#smallContent li span {color: #006600;position: absolute;top: 0px;right: 2px;}
UL {list-style-type: none;}
</style>
<script language="javascript" type="text/javascript">
/*
作者：kkai
2008-8-3
*/
$(document).ready(function() {
$("#Keyword").attr('autocomplete','off');//设置浏览器的自动提示关闭
var $autocomplete=$('<div id=\"smallContent\">123</div>').hide().insertAfter('#Keyword');
var selectedItem=null;//当前选中项
var setSelectedItem=function(item){//设置但前选中项setSelectedItem(item)
selectedItem=item;
if(selectedItem===null){
$autocomplete.hide();
return;
}
/*不能循环选择的代码
if(selectedItem<0){
selectedItem=0;
}
if(selectedItem>=$autocomplete.children().find('li').length){
selectedItem=$autocomplete.children().find('li').length-1;
}*/
if(selectedItem<0){
selectedItem=$autocomplete.children().find('li').length-1;
}
if(selectedItem>=$autocomplete.children().find('li').length){
selectedItem=0;
}
$autocomplete.children().find('li').removeClass('hov').eq(selectedItem).addClass('hov');
$autocomplete.show();
}
$("#Keyword").keyup(function(event){
event||(event=window.event);//为了兼容浏览器，如果没有这个，只适用于IE
if(event.keyCode>40||event.keyCode==8||event.keyCode==32||event.keyCode==13){
/*
代码为40和以下的键，是特殊键，包括（回车，方向，退出等）
8为Backspace键
32为空格[为了适应中文输入法]
13为回车[为了适应中文输入法]
*/
if(event.keyCode==13)//回车键
{
$("#Keyword").val($autocomplete.children().find("li").eq(selectedItem).html());
$autocomplete.hide();
$("form").submit(function(){return false});//阻止页面提交
}
selectedItem=null;//重置一下选中项,由于它是一个全局变量
$.ajax({
type: "GET",
url:"auto.asp",
data:"keyword="+encodeURI($("#Keyword").val()),
success: function(data){
if(data!="") {
$autocomplete.empty();
var text="<ul>"+data+"</ul>";
$autocomplete.html(text);
if($autocomplete.children().find('li').length<1)//当没有加载数据的时候隐藏
{$autocomplete.hide();}
/**/
$autocomplete.children().find('li').mouseover(function(){//这里实现的是鼠标选取，与下面的冲突，故把下面的注释掉
setSelectedItem($autocomplete.children().find('li').index(this));
//alert(selectedItem);
}).click(function(){//实现鼠标点击，选择自动提示的内容
//$("#Keyword").get(0).value = $(this).html();
$("#Keyword").val($autocomplete.children().find("li").eq(selectedItem).html());
//$("form").get(0).submit(); //鼠标点击提交页面
$autocomplete.hide();
return;
}).mouseout(function(){//这里实现鼠标移出，自动提示框
$(this).removeClass("hov");
});
/**/
$autocomplete.show();
}//end if
else{
$autocomplete.hide();
} //end else
}//end function(data)
});//end $.ajax
}//end if(event.keyCode>40||event.keyCode==8)
else if(event.keyCode==27){//退出ESC
$("#Keyword").val("");
$autocomplete.hide();
}
else if(event.keyCode==38)//上方向键
{
//alert('你选择了上方向键');
if($("#Keyword").val()==""){//用于阻止，直接按下方向键，载入原来的数据
$autocomplete.empty();
$autocomplete.hide();
}
if($autocomplete.children().find('li').length<1){//如果没有找到li，不显示下面的div
$autocomplete.empty();
$autocomplete.hide();
}
else{
setSelectedItem(selectedItem-1);
$("#Keyword").val($autocomplete.children().find("li").eq(selectedItem).html());
}
}
else if(event.keyCode==40)//下方向键
{
//alert('你选择了下方向键')
if($("#Keyword").val()==""){//用于阻止，直接按下方向键，载入原来的数据
$autocomplete.empty();
$autocomplete.hide();
}
if($autocomplete.children().find('li').length<1){//如果没有找到li，不显示下面的div
$autocomplete.empty();
$autocomplete.hide();
}
else{
if(selectedItem===null){//如果没有这个判断，而直接写esle里面的语句，那么第一次就按下方向键，会直接选择第二个，我猜是因为null+1=1吧
setSelectedItem(0);
}else{
setSelectedItem(selectedItem+1);
}
$("#Keyword").val($autocomplete.children().find("li").eq(selectedItem).html());
}
}
});//end keyup
$("#Keyword").blur(function(){//点击一下文档其他地方，取消提示[其实就是鼠标移出，文本框的时候，提示取消]
if(selectedItem===null){
$autocomplete.hide();
return;
}
selectedDiv = $autocomplete.children().find(".hov");
if(selectedDiv.length<1){
$autocomplete.hide();
return;
}
});//end $("#Keyword").blur
}); //end document.ready
</script>
</head>
<body>
<form id="f" runat="server">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="330">
<div id="content">
<input name="Keyword" type="text" id="Keyword" size="50" maxlength="30" autocomplete="off" />
</div>
</td>
<td width="170"> <input type="submit" name="Submit" value="google" /></td>
</tr>
</table>
</form>
</body>
</html>
服务器端代码asp
Code<%
keyword=Request("keyword")
if keyword<>"" then
response.Write("<li>"+keyword+"1"+"</li>")
response.Write("<li>"+keyword+"2"+"</li>")
response.Write("<li>"+keyword+"3"+"</li>")
response.Write("<li>"+keyword+"4"+"</li>")
response.Write("<li>"+keyword+"5"+"</li>")
response.Write("<li>"+keyword+"6"+"</li>")
response.Write("<li>"+keyword+"7"+"</li>")
end if
%>
浙公网安备 33010602011771号