Utilice JavaScript para crear un cuadro de texto con indicaciones automáticas. Los amigos que lo necesiten pueden consultarlo. Ejemplo 1: escribir la implementación AJAX directamente.
Cliente:
Copie el código de código de la siguiente manera:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transicional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<cabeza>
<title>Ajax implementa un cuadro de texto de aviso automático</title>
<estilo>
<!--
cuerpo{
familia de fuentes: Arial, Helvética, sans-serif;
tamaño de fuente: 12 px; relleno: 0 px;
}
formulario {relleno: 0px; margen: 0px;}
aporte{
/* Estilo del cuadro de entrada del usuario */
familia de fuentes: Arial, Helvética, sans-serif;
tamaño de fuente: 12 px; borde: 1 px sólido # 000000;
ancho: 200 px; relleno: 1 px;
}
#ventana emergente{
/* Estilo del bloque div del cuadro de solicitud */
posición:absoluta; ancho:202px;
color:#004a7e; tamaño de fuente:12px;
familia de fuentes: Arial, Helvética, sans-serif;
izquierda: 41 px; arriba: 25 px;
}
#popup.mostrar{
/* Mostrar el borde del cuadro de solicitud */
borde: 1px sólido #004a7e;
}
#popup.ocultar{
/* Ocultar el borde del cuadro de aviso*/
borde: ninguno;
}
/* Estilo del cuadro de aviso*/
ul{
estilo de lista: ninguno;
margen: 0px; relleno: 0px;
}
li.mouseOver{
color de fondo:#004a7e;
color:#FFFFFF;
}
li.mouseOut{
color de fondo:#FFFFFF;
color:#004a7e;
}
-->
</estilo>
<lenguaje de escritura=javascript>
var oInputField; //Considerando que se usa en muchas funciones.
var oPopDiv; // Entonces tiene la forma de una variable global
var oColorsUl;
var xmlHttp;
función crearXMLHttpRequest(){
si (ventana.ActiveXObject)
xmlHttp = nuevo ActiveXObject(Microsoft.XMLHTTP);
de lo contrario si (ventana.XMLHttpRequest)
xmlHttp = nueva XMLHttpRequest();
}
función variablesinit(){
//Inicializar variables
oInputField = document.forms[myForm1].colores;
oPopDiv = document.getElementById(ventana emergente);
oColorsUl = document.getElementById(colors_ul);
}
función borrarColores(){
//Borrar el contenido del mensaje
para(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = ocultar;
}
función establecerColores(los_colores){
// Muestra un cuadro de aviso y el parámetro pasado es una matriz compuesta por los resultados coincidentes.
clearColors(); //Cada vez que ingresa una letra, borre el mensaje original antes de continuar.
oPopDiv.className = mostrar;
var oLi;
for(var i=0;i<the_colors.length;i++){
//Mostrar los resultados de las solicitudes coincidentes al usuario uno por uno
oLi = documento.createElement(li);
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = función(){
this.className = mouseOver; //Resaltar cuando el mouse pasa por encima
}
oLi.onmouseout = función(){
this.className = mouseOut; //Restaurar al estado original al salir
}
oLi.onclick = función(){
//Cuando el usuario hace clic en un elemento coincidente, establece el cuadro de entrada en el valor del elemento
oInputField.value = this.firstChild.nodeValue;
clearColors(); //Borrar el cuadro de aviso al mismo tiempo
}
}
}
función buscarColores(){
initVars(); //Inicializar variables
si(oInputField.valor.longitud > 0){
createXMLHttpRequest(); //Enviar la entrada del usuario al servidor
var sUrl = 9-10.aspx?sColor= + oInputField.value + ×tamp= + nueva Fecha().getTime();
xmlHttp.open(GET,sUrl,verdadero);
xmlHttp.onreadystatechange = función(){
si(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var aResultado = nueva matriz();
si(xmlHttp.responseText.length){
aResultado = xmlHttp.responseText.split();
setColors(aResult); //Mostrar resultados del servidor
}
demás
colores claros();
}
}
xmlHttp.send(nulo);
}
demás
clearColors(); //Borrar el cuadro de aviso cuando no hay entrada (por ejemplo, el usuario presiona la tecla Supr)
}
</script>
</cabeza>
<cuerpo>
<método de formulario=nombre de publicación=myForm1>
Color: <tipo de entrada=nombre de texto=colores id=colores onkeyup=findColors()/>;
</formulario>
<div id=ventana emergente>
<ul id=colores_ul></ul>
</div>
</cuerpo>
</html>
Lado del servidor (9-10.aspx):
Copie el código de código de la siguiente manera:
<%@ Idioma de página=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ Importar espacio de nombres=System.Data %>
<%
Response.CacheControl = sin caché;
Response.AddHeader (Pragma, sin caché);
cadena sInput = Solicitud[sColor].Trim();
si(sEntrada.Longitud == 0)
devolver;
cadena sResultado =;
cadena[] aColors = nuevo cadena[]{azulalice,antiguocon,aguamarina,azul,beige,bisque,negro,almendra blanqueada,azul,azulvioleta,latón,bronce,marrón,burlywood,azul cadete,chartreuse,chocolate,cobre,coral,flor de maízrb lue,seda de maíz,cian,azul oscuro,cian oscuro,varilla dorada oscura,gris oscuro,verde oscuro,caqui oscuro,magenta oscuro,verde oliva oscuro,corchid oscuro,renge oscuro,rojo oscuro,salmón oscuro,verde mar oscuro,azul pizarra oscuro,pizarra oscuro gris, turquesa oscuro, violeta oscuro, rosa intenso, azul cielo profundo, gris oscuro, azul dodger, feldespato, ladrillo refractario, blanco floral, verde bosque, fucsia, Gainsboro, oro, vara de oro, vara de oro, blanco gost, gris, verde, verdoso amarillo, melaza, rosa intenso, rojo indio, inen, marfil, caqui, lavanda, rubor lavanda, verde césped, chiffon limón, azul claro, coral claro, cian claro, vara de oro claro, amarillo de vara claro, gris claro, verde claro, l rosa claro, salmón claro, verde mar claro, azul cielo claro, azul pizarra claro, gris pizarra claro, azul acero claro, amarillo claro, lima, verde lima, magenta, magenta, maroom, granate, aguamarina media, azul medio, medi umorchid,purpul medio,verde mar medio,azul pizarra medio,verde primavera medio,turquesa medio,rojo violeta medio,azul medianoche,crema de menta,rosa brumosa,mocasín,blanco navajo,azul marino,azul marino,encaje antiguo,oli vedrab,naranja,orquídea,orengered,palegodenrod,verde pálido,turquesa pálido,rojo pálido,papayawhip,peachpuff,perú,rosa,ciruela,azul polvo,púrpura,cuarzo,rojo,marrón rosado,azul real,marrón silla de montar,sal lunes, marrón arena, escarlata, verde mar, concha, siena, plata, azul cielo, gris pizarra, nieve, verde primavera, azul acero, tostado, cardo, tomate, turquesa, violeta, rojo violeta, trigo, humo blanco, amarillo, verde amarillo};
for(int i=0;i<aColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResultado += aColores[i] + ,;
}
if(sResult.Length>0) //Si hay una coincidencia
sResult = sResult.Substring(0,sResult.Length-1); //Elimina el último número
Respuesta.Write(sResult);
%>
Ejemplo 2: Implementado usando jQuery.
Cliente:
Copie el código de código de la siguiente manera:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transicional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<cabeza>
<title>JQuery implementa un cuadro de texto de solicitud automática</title>
<estilo>
<!--
cuerpo{
familia de fuentes: Arial, Helvética, sans-serif;
tamaño de fuente: 12 px; relleno: 0 px;
}
formulario {relleno: 0px; margen: 0px;}
aporte{
/* Estilo del cuadro de entrada del usuario */
familia de fuentes: Arial, Helvética, sans-serif;
tamaño de fuente: 12 px; borde: 1 px sólido # 000000;
ancho: 200 px; relleno: 1 px;
}
#ventana emergente{
/* Estilo del bloque div del cuadro de solicitud */
posición:absoluta; ancho:202px;
color:#004a7e; tamaño de fuente:12px;
familia de fuentes: Arial, Helvética, sans-serif;
izquierda: 41 px; arriba: 25 px;
}
#popup.mostrar{
/* Mostrar el borde del cuadro de solicitud */
borde: 1px sólido #004a7e;
}
/* Estilo del cuadro de aviso*/
ul{
estilo de lista: ninguno;
margen: 0px; relleno: 0px;
color:#004a7e;
}
li.mouseOver{
color de fondo:#004a7e;
color:#FFFFFF;
}
-->
</estilo>
<lenguaje de escritura=javascript src=jquery.min.js></script>
<lenguaje de escritura=javascript>
var oInputField; //Considerando que se usa en muchas funciones.
var oPopDiv; // Entonces tiene la forma de una variable global
var oColorsUl;
función variablesinit(){
//Inicializar variables
oInputField = $(#colores);
oPopDiv = $(#popup);
oColorsUl = $(#colors_ul);
}
función borrarColores(){
//Borrar el contenido del mensaje
oColorsUl.empty();
oPopDiv.removeClass(mostrar);
}
función establecerColores(los_colores){
// Muestra un cuadro de aviso y el parámetro pasado es una matriz compuesta por los resultados coincidentes.
clearColors(); //Cada vez que ingresa una letra, borre el mensaje original antes de continuar.
oPopDiv.addClass(mostrar);
for(var i=0;i<the_colors.length;i++)
//Mostrar los resultados de las solicitudes coincidentes al usuario uno por uno
oColorsUl.append($(<li>+the_colors[i]+</li>));
oColorsUl.find(li).click(función(){
oInputField.val($(este).text());
colores claros();
}).flotar(
función(){$(esto).addClass(mouseOver);},
function(){$(this).removeClass(mouseOver);}
);
}
función buscarColores(){
initVars(); //Inicializar variables
if(oInputField.val().longitud > 0){
//Obtener datos asincrónicos
$.get(14-10.aspx,{sColor:oInputField.val()},
función(datos){
var aResultado = nueva matriz();
si(datos.longitud > 0){
aResultado = datos.split(,);
setColors(aResult); //Mostrar resultados del servidor
}
demás
colores claros();
});
}
demás
clearColors(); //Borrar el cuadro de aviso cuando no hay entrada (por ejemplo, el usuario presiona la tecla Supr)
}
</script>
</cabeza>
<cuerpo>
<método de formulario=nombre de publicación=myForm1>
Color: <tipo de entrada=nombre de texto=colores id=colores onkeyup=findColors()/>;
</formulario>
<div id=ventana emergente>
<ul id=colores_ul></ul>
</div>
</cuerpo>
</html>
Lado del servidor (14-10.aspx):
Copie el código de código de la siguiente manera:
<%@ Idioma de página=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ Importar espacio de nombres=System.Data %>
<%
Response.CacheControl = sin caché;
Response.AddHeader (Pragma, sin caché);
cadena sInput = Solicitud[sColor].Trim();
si(sEntrada.Longitud == 0)
devolver;
cadena sResultado =;
cadena[] aColors = nuevo cadena[]{azulalice,antiguocon,aguamarina,azul,beige,bisque,negro,almendra blanqueada,azul,azulvioleta,latón,bronce,marrón,burlywood,azul cadete,chartreuse,chocolate,cobre,coral,flor de maízrb lue,seda de maíz,cian,azul oscuro,cian oscuro,varilla dorada oscura,gris oscuro,verde oscuro,caqui oscuro,magenta oscuro,verde oliva oscuro,corchid oscuro,renge oscuro,rojo oscuro,salmón oscuro,verde mar oscuro,azul pizarra oscuro,pizarra oscuro gris, turquesa oscuro, violeta oscuro, rosa intenso, azul cielo profundo, gris oscuro, azul dodger, feldespato, ladrillo refractario, blanco floral, verde bosque, fucsia, Gainsboro, oro, vara de oro, vara de oro, blanco gost, gris, verde, verdoso amarillo, melaza, rosa intenso, rojo indio, inen, marfil, caqui, lavanda, rubor lavanda, verde césped, chiffon limón, azul claro, coral claro, cian claro, vara de oro claro, amarillo de vara claro, gris claro, verde claro, l rosa claro, salmón claro, verde mar claro, azul cielo claro, azul pizarra claro, gris pizarra claro, azul acero claro, amarillo claro, lima, verde lima, magenta, magenta, maroom, granate, aguamarina media, azul medio, medi umorchid,purpul medio,verde mar medio,azul pizarra medio,verde primavera medio,turquesa medio,rojo violeta medio,azul medianoche,crema de menta,rosa brumosa,mocasín,blanco navajo,azul marino,azul marino,encaje antiguo,oli vedrab,naranja,orquídea,orengered,palegodenrod,verde pálido,turquesa pálido,rojo pálido,papayawhip,peachpuff,perú,rosa,ciruela,azul polvo,púrpura,cuarzo,rojo,marrón rosado,azul real,marrón silla de montar,sal lunes, marrón arena, escarlata, verde mar, concha, siena, plata, azul cielo, gris pizarra, nieve, verde primavera, azul acero, tostado, cardo, tomate, turquesa, violeta, rojo violeta, trigo, humo blanco, amarillo, verde amarillo};
for(int i=0;i<aColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResultado += aColores[i] + ,;
}
if(sResult.Length>0) //Si hay una coincidencia
sResult = sResult.Substring(0,sResult.Length-1); //Elimina el último número
Respuesta.Write(sResult);
%>