您的位置：首页 > Web前端 > JQuery

jQuery 制作自动提示的文本框

2012-02-17 11:01 302 查看

SelfText.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SelfText.aspx.cs" Inherits="Javascript.Test.SelfText" %>

<!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 runat="server">
<title>jQuery实现自动提示的文本框</title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
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 #000; width: 200px; padding: 1px; margin: 0px; }
#popup { 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: #fff; }
</style>
<script type="text/javascript" language="javascript">
var oInputField;
var oPopDiv;
var oColorsUI;
function initVars()
{
oInputField = $("#colors");
oPopDiv = $("#popup");
oColorsUI = $("#colors_ul");
}

function clearColors()
{
oColorsUI.empty();
oPopDiv.removeClass("show");
}

function setColors(the_colors)
{
clearColors();
oPopDiv.addClass("show");
for (var i = 0; i < the_colors.length; i++)
{
oColorsUI.append($("<li>" + the_colors[i] + "</li>"));
}
oColorsUI.find("li").click(
function ()
{
oInputField.val($(this).text());
clearColors();
}).hover(
function () { $(this).addClass("mouseOver"); },
function () { $(this).removeClass("mouseOver"); }
);
}

function findColors()
{
initVars();
if (oInputField.val().length > 0)
{
$.get("data.aspx", { sColor: oInputField.val() }
, function (data)
{
var aResult = new Array();
if (data.length > 0)
{
aResult = data.split(",");
setColors(aResult);
}
else
clearColors();
}
);
}
else
clearColors();
}
</script>
</head>
<body>
<form id="form1" 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>

data.aspx

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.CacheControl = "no-cache";
Response.AddHeader("Pragma","no-cache");
string sInput = Request["sColor"].Trim();
if(sInput.Length == 0)
return;
string sResult = "";

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"};

for(int i=0;i<aColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ",";
}
if(sResult.Length>0)									//如果有匹配项
sResult = sResult.Substring(0,sResult.Length-1);	//去掉最后的“,”号
Response.Write(sResult);
%>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery colors function string quartz

相关文章推荐

新的分享

章节导航