JavaScript 制作带自动提示的文本框

最新推荐文章于 2025-08-12 14:37:12 发布

weixin_33709219

最新推荐文章于 2025-08-12 14:37:12 发布

阅读量74

点赞数

文章标签： javascript xhtml c# ViewUI

本文介绍使用原生AJAX及jQuery实现文本框自动提示功能的方法。通过客户端与服务器交互，实现用户输入时的实时反馈，提升用户体验。涵盖HTML、CSS、JavaScript及C#后端代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例一：直接编写AJAX 实现。

客户端：

9-10.html

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title > Ajax实现自动提示的文本框 </ title >
< style >

</ style >
< script language ="javascript" >
var oInputField;     // 考虑到很多函数中都要使用
var oPopDiv;         // 因此采用全局变量的形式
var oColorsUl;
var xmlHttp;
function createXMLHttpRequest(){
     if (window.ActiveXObject)
        xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " );
     else if (window.XMLHttpRequest)
        xmlHttp = new XMLHttpRequest();
}
function initVars(){
     // 初始化变量
    oInputField = document.forms[ " myForm1 " ].colors;
    oPopDiv = document.getElementById( " popup " );
    oColorsUl = document.getElementById( " colors_ul " );
}
function clearColors(){
     // 清除提示内容
     for ( var i = oColorsUl.childNodes.length - 1 ;i >= 0 ;i -- )
        oColorsUl.removeChild(oColorsUl.childNodes[i]);
    oPopDiv.className = " hide " ;
}
function setColors(the_colors){
     // 显示提示框，传入的参数即为匹配出来的结果组成的数组
    clearColors();     // 每输入一个字母就先清除原先的提示，再继续
    oPopDiv.className = " show " ;
     var oLi;
     for ( var i = 0 ;i < the_colors.length;i ++ ){
         // 将匹配的提示结果逐一显示给用户
        oLi = document.createElement( " li " );
        oColorsUl.appendChild(oLi);
        oLi.appendChild(document.createTextNode(the_colors[i]));

        oLi.onmouseover = function (){
             this .className = " mouseOver " ;     // 鼠标经过时高亮
        }
        oLi.onmouseout = function (){
             this .className = " mouseOut " ;     // 离开时恢复原样
        }
        oLi.onclick = function (){
             // 用户点击某个匹配项时，设置输入框为该项的值
            oInputField.value = this .firstChild.nodeValue;
            clearColors();     // 同时清除提示框
        }
    }
}
function findColors(){
    initVars();         // 初始化变量
     if (oInputField.value.length > 0 ){
        createXMLHttpRequest();         // 将用户输入发送给服务器
         var sUrl = " 9-10.aspx?sColor= " + oInputField.value + " &timestamp= " + new Date().getTime();
        xmlHttp.open( " GET " ,sUrl, true );
        xmlHttp.onreadystatechange = function (){
             if (xmlHttp.readyState == 4 && xmlHttp.status == 200 ){
                 var aResult = new Array();
                 if (xmlHttp.responseText.length){
                    aResult = xmlHttp.responseText.split( " , " );
                    setColors(aResult);     // 显示服务器结果
                }
                 else
                    clearColors();
            }
        }
        xmlHttp.send( null );
    }
     else
        clearColors();     // 无输入时清除提示框（例如用户按del键）
}
</ 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 >

服务器端（9-10.aspx ）：

9-10.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 实现。

客户端：

14-10.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 >

</ style >
< script language ="javascript" src ="jquery.min.js" ></ script >
< script language ="javascript" >
var oInputField;     // 考虑到很多函数中都要使用
var oPopDiv;         // 因此采用全局变量的形式
var oColorsUl;
function initVars(){
     // 初始化变量
    oInputField = $( " #colors " );
    oPopDiv = $( " #popup " );
    oColorsUl = $( " #colors_ul " );
}
function clearColors(){
     // 清除提示内容
    oColorsUl.empty();
    oPopDiv.removeClass( " show " );
}
function setColors(the_colors){
     // 显示提示框，传入的参数即为匹配出来的结果组成的数组
    clearColors();     // 每输入一个字母就先清除原先的提示，再继续
    oPopDiv.addClass( " show " );
     for ( var i = 0 ;i < the_colors.length;i ++ )
         // 将匹配的提示结果逐一显示给用户
        oColorsUl.append($( " <li> " + the_colors[i] + " </li> " ));
    oColorsUl.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( " 14-10.aspx " ,{sColor:oInputField.val()},
             function (data){
                 var aResult = new Array();
                 if (data.length > 0 ){
                    aResult = data.split( " , " );
                    setColors(aResult);     // 显示服务器结果
                }
                 else
                    clearColors();
        });
    }
     else
        clearColors();     // 无输入时清除提示框（例如用户按del键）
}
</ 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 >

服务器端（14-10.aspx ）：

14-10.aspx