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数据