Jquery兑现自动提示的文本框（转载） _Web前端

Jquery实现自动提示的文本框（转载）

先看页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery实现自动提示的文本框</title>
<style>
<!--
body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
	/* 用户输入框的样式 */
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px; border:1px solid #000000;
	width:200px; padding:1px; margin:0px;
}
#popup{
	/* 提示框div块的样式 */
	position:absolute; width:202px;
	color:#004a7e; font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	left:41px; top:25px;
}
#popup.show{
	/* 显示提示框的边框 */	
	border:1px solid #004a7e;
}
/* 提示框的样式风格 */
ul{
	list-style:none;
	margin:0px; padding:0px;
	color:#004a7e;
}
li.mouseOver{
	background-color:#004a7e;
	color:#FFFFFF;
}
-->
</style>

<script language="javascript" src="js/jquery.js"></script>
<script laguange="javascript">
function setColor(data)
{

$("#popup").addClass("show");
$("#colors_ul").empty();
for(var i=0;i<data.length;i++){
   $("#colors_ul").append("<li>"+data[i].name+"</li>");
 }

$("#colors_ul").find("li").click(function(){
$("#colors").val($(this).text());
$("#colors_ul").empty();
$("#popup").removeClass();
});

$("#colors_ul").find("li").hover(function(){$(this).addClass("mouseOver")},function(){$(this).removeClass("mouseOver")});

}

function createQueryString()
{
var color = $("#colors").val();
var queryString = {name:color};
return queryString;
}


function findColors()
{

$.getJSON("getJsonList",createQueryString(),function(data){
setColor(data);
});

}


</script>

</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />
</form>
<div id="popup">
	<ul id="colors_ul"></ul>
</div>
</body>
</html>

$.getJSON("getJsonList",createQueryString(),function(data){
setColor(data);
});

通过请求getJsonList获得返回的Json数据