jquery学习笔记之自动提示框
html代码<!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="jquery.min.js"></script><script laguange="javascript">function setColor(the_colors){var a=the_colors.split(",");$("#popup").addClass("show");$("#colors_ul").empty();for(var i=0;i<a.length;i++)$(colors_ul).append("<li>"+a+"</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 = {color:color};return queryString;}function findColors(){$.get("http://127.0.0.1:8080/sjb/test.jsp",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>
jsp代码
<%String color=request.getParameter("color");String[] aColors = new String[]{"aliceblue","antiquewith","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brass","bronze","brown","burlywood","cadetblue","chartreuse","chocolate","copper","coral","cornfloewrblue","cornsilk","cyan","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkhaki","darkmagenta","darkolivegreen","darkorchid","darkorenge","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue","feldspar","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","gold","goldenrod","golenrod","gostwhite","gray","green","greenyellow","honeydew","hotpink","indianred","inen","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgodenrod","lightgodenrodyellow","lightgray","lightgreen","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslateblue","lightslategray","lightsteelblue","lightyellow","lime","limegreen","magenta","magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","navyblue","oldlace","olivedrab","orange","orchid","orengered","palegodenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","quartz","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","scarlet","seagreen","seashell","sienna","silver","skyblue","slategray","snow","springgreen","steelblue","tan","thistle","tomato","turquoise","violet","violetred","wheat","whitesmoke","yellow","yellowgreen"};String returnColor="";for(int i=0;i<aColors.length;i++){if(aColors.indexOf(color)==0)returnColor=returnColor+aColors+",";}if(!returnColor.equals(""))out.println(returnColor.substring(0,returnColor.length()-1));%>
页:
[1]