先看页面:
<!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" οnkeyup="findColors();" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
</html>
$.getJSON("getJsonList",createQueryString(),function(data){
setColor(data);
});
通过请求getJsonList获得返回的Json数据