jQuery 制作自动提示的文本框

最新推荐文章于 2021-02-16 18:39:49 发布

安得权

最新推荐文章于 2021-02-16 18:39:49 发布

阅读量1.5k

点赞数

分类专栏： [ 05 ] JS&HTML&CSS 文章标签： jquery colors function string quartz

[ 05 ] JS&HTML&CSS 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

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" οnkeyup="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);
%>

安得权

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 制作自动提示的文本框

SelfText.aspx jQuery实现自动提示的文本框 body { font-family: Arial,Helvetica,sans-serif; font-size: 12px; padding: 0px; margin: 5px; } form { padding: 0px; margin: 0px; }
复制链接

扫一扫