Use JavaScript para criar uma caixa de texto com avisos automáticos. Amigos que precisarem podem consultá-la. Exemplo 1: Escreva a implementação AJAX diretamente.
Cliente:
Copie o código do código da seguinte forma:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<cabeça>
<title>Ajax realiza caixa de texto de prompt automático</title>
<estilo>
<!--
corpo{
família de fontes:Arial, Helvetica, sans-serif;
tamanho da fonte: 12px; preenchimento: 0px;
}
formulário{preenchimento:0px;margem:0px;}
entrada{
/* Estilo da caixa de entrada do usuário */
família de fontes:Arial, Helvetica, sans-serif;
tamanho da fonte: 12px; borda: 1px sólido #000000;
largura:200px; preenchimento:1px;margem:0px;
}
#Aparecer{
/* Estilo do bloco div da caixa de prompt */
posição:largura absoluta:202px;
cor:#004a7e; tamanho da fonte:12px;
família de fontes:Arial, Helvetica, sans-serif;
esquerda:41px; superior:25px;
}
#popup.show{
/* Exibe a borda da caixa de prompt */
borda:1px sólido #004a7e;
}
#popup.hide{
/* Oculta a borda da caixa de prompt*/
fronteira:nenhuma;
}
/* Estilo da caixa de prompt*/
ul{
estilo de lista: nenhum;
margem:0px; preenchimento:0px;
}
li.mouseOver{
cor de fundo:#004a7e;
cor:#FFFFFF;
}
li.mouseOut{
cor de fundo:#FFFFFF;
cor:#004a7e;
}
-->
</estilo>
<linguagem de script=javascript>
var oInputField; //Considerando que é utilizado em diversas funções
var oPopDiv; //Então está na forma de uma variável global
var oColorsUl;
var xmlHttp;
função createXMLHttpRequest(){
if(janela.ActiveXObject)
xmlHttp = novo ActiveXObject(Microsoft.XMLHTTP);
senão if(window.XMLHttpRequest)
xmlHttp = novo XMLHttpRequest();
}
função initVars(){
//Inicializa variáveis
oInputField = document.forms[meuForm1].colors;
oPopDiv = document.getElementById(popup);
oColorsUl = document.getElementById(colors_ul);
}
função clearColors(){
//Limpa o conteúdo do prompt
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = ocultar;
}
function setColors(the_colors){
//Exibe uma caixa de prompt e o parâmetro passado é um array composto pelos resultados correspondentes.
clearColors(); //Cada vez que você inserir uma letra, limpe o prompt original antes de continuar.
oPopDiv.className = mostrar;
var oLi;
for(var i=0;i<the_colors.length;i++){
//Exibe os resultados do prompt correspondentes para o usuário, um por um
oLi = document.createElement(li);
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = function(){
this.className = mouseOver; //Destaque quando o mouse passa
}
oLi.onmouseout = function(){
this.className = mouseOut; //Restaurar ao estado original ao sair
}
oLi.onclick=função(){
//Quando o usuário clica em um item correspondente, defina a caixa de entrada com o valor do item
oInputField.value = this.firstChild.nodeValue;
clearColors(); //Limpa a caixa de prompt ao mesmo tempo
}
}
}
função encontrarCores(){
initVars(); //Inicializa variáveis
if(oInputField.value.length > 0){
createXMLHttpRequest(); //Envia a entrada do usuário para o servidor
var sUrl = 9-10.aspx?sColor= + oInputField.value + ×tamp= + new Date().getTime();
xmlHttp.open(GET,sUrl,true);
xmlHttp.onreadystatechange=função(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var resultado = new Array();
if(xmlHttp.responseText.length){
aResult = xmlHttp.responseText.split();
setColors(aResult); //Exibe os resultados do servidor
}
outro
clearColors();
}
}
xmlHttp.send(nulo);
}
outro
clearColors(); //Limpa a caixa de prompt quando não há entrada (por exemplo, o usuário pressiona a tecla del)
}
</script>
</head>
<corpo>
<método do formulário=nome da postagem=meuForm1>
Cor: <input type=text name=colors id=colors onkeyup=findColors() />;
</form>
<div id=pop-up>
<ul id=colors_ul></ul>
</div>
</body>
</html>
Lado do servidor (9-10.aspx):
Copie o código do código da seguinte forma:
<%@ Idioma da página=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@Importar Namespace=System.Data %>
<%
Response.CacheControl = sem cache;
Response.AddHeader(Pragma,sem cache);
string sInput = Solicitação[sColor].Trim();
if(sInput.Comprimento == 0)
retornar;
string resultado = ;
string[] aColors = novo string[]{aliceblue,antiguidadecom,água-marinha,azul,bege,bisque,preto,amêndoa branqueada,azul,azulvioleta,latão,bronze,marrom,burlywood,cadetblue,chartreuse,chocolate,cobre,coral,cornfloewrb lue, seda de milho, ciano, azul escuro, ciano escuro, vara de ouro escuro, cinza escuro, verde escuro, cáqui, magenta escuro, verde escuro, orquídea escura, korenge escuro, vermelho escuro, salmão escuro, verde escuro, azul escuro, ardósia escura cinza, turquesa escura, violeta escuro, rosa profundo, azul profundo, cinza escuro, dodgerblue, feldspato, tijolo refratário, branco floral, verde floresta, fúcsia, gainsboro, ouro, goldenrod, golenrod, gostwhite, cinza, verde, esverdeado amarelo, melada, rosa quente, vermelho indiano, inen, marfim, cáqui, lavanda, lavanda blush, gramado, chiffon limão, azul claro, coral claro, ciano claro, lightgodenrod, lightgodenrodyellow, cinza claro, verde claro, eu rosa claro, salmão claro, verde claro, azul claro, azul claro, azul claro, cinza claro, azul claro, amarelo claro, limão, verde limão, magenta, magenta, maroom, marrom, médio água marinha, azul médio, medi umorquídea, purpul médio, verde mar médio, azul ardósia médio, verde primavera médio, turquesa médio, vermelho violeta médio, azul meia-noite, creme de menta, rosa enevoada, mocassim, branco navajo, marinho, azul marinho, renda antiga, oli vedrab, laranja, orquídea, orangered, palegodenrod, verde claro, turquesa pálida, vermelho palevioleta, mamão, pêssego, peru, rosa, ameixa, azul pó, roxo, quartzo, vermelho, marrom rosado, azul real, marrom sela, sal segunda-feira, marrom-arenoso, escarlate, verde-mar, concha do mar, sienna, prata, azul-celeste, cinza-ardósia, neve, verde-primavera, azul-aço, bronzeado, cardo, tomate, turquesa, violeta, vermelho-violeta, trigo, fumaça branca, amarelo, verde-amarelo};
for(int i=0;i<aColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ,;
}
if(sResult.Length>0) //Se houver uma correspondência
sResult = sResult.Substring(0,sResult.Length-1);
Response.Write(sResult);
%>
Exemplo 2: Implementado usando jQuery.
Cliente:
Copie o código do código da seguinte forma:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<cabeça>
<title>JQuery implementa caixa de texto de prompt automático</title>
<estilo>
<!--
corpo{
família de fontes:Arial, Helvetica, sans-serif;
tamanho da fonte: 12px; preenchimento: 0px;
}
formulário{preenchimento:0px;margem:0px;}
entrada{
/* Estilo da caixa de entrada do usuário */
família de fontes:Arial, Helvetica, sans-serif;
tamanho da fonte: 12px; borda: 1px sólido #000000;
largura:200px; preenchimento:1px;margem:0px;
}
#Aparecer{
/* Estilo do bloco div da caixa de prompt */
posição:largura absoluta:202px;
cor:#004a7e; tamanho da fonte:12px;
família de fontes:Arial, Helvetica, sans-serif;
esquerda:41px; superior:25px;
}
#popup.show{
/* Exibe a borda da caixa de prompt */
borda:1px sólido #004a7e;
}
/* Estilo da caixa de prompt*/
ul{
estilo de lista: nenhum;
margem:0px; preenchimento:0px;
cor:#004a7e;
}
li.mouseOver{
cor de fundo:#004a7e;
cor:#FFFFFF;
}
-->
</estilo>
<script idioma=javascript src=jquery.min.js></script>
<linguagem de script=javascript>
var oInputField; //Considerando que é utilizado em diversas funções
var oPopDiv; //Então está na forma de uma variável global
var oColorsUl;
função initVars(){
//Inicializa variáveis
oInputField = $(#cores);
oPopDiv = $(#popup);
oColorsUl = $(#colors_ul);
}
função clearColors(){
//Limpa o conteúdo do prompt
oColorsUl.empty();
oPopDiv.removeClass(mostrar);
}
function setColors(the_colors){
//Exibe uma caixa de prompt e o parâmetro passado é um array composto pelos resultados correspondentes.
clearColors(); //Cada vez que você inserir uma letra, limpe o prompt original antes de continuar.
oPopDiv.addClass(mostrar);
for(var i=0;i<the_colors.length;i++)
//Exibe os resultados do prompt correspondentes para o usuário, um por um
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);}
);
}
função encontrarCores(){
initVars(); //Inicializa variáveis
if(oInputField.val().length > 0){
//Obter dados assíncronos
$.get(14-10.aspx,{sColor:oInputField.val()},
função(dados){
var resultado = new Array();
if(dados.comprimento > 0){
aResult = dados.split();
setColors(aResult); //Exibe os resultados do servidor
}
outro
clearColors();
});
}
outro
clearColors(); //Limpa a caixa de prompt quando não há entrada (por exemplo, o usuário pressiona a tecla del)
}
</script>
</head>
<corpo>
<método do formulário=nome da postagem=meuForm1>
Cor: <input type=text name=colors id=colors onkeyup=findColors() />;
</form>
<div id=pop-up>
<ul id=colors_ul></ul>
</div>
</body>
</html>
Lado do servidor (14-10.aspx):
Copie o código do código da seguinte forma:
<%@ Idioma da página=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@Importar Namespace=System.Data %>
<%
Response.CacheControl = sem cache;
Response.AddHeader(Pragma,sem cache);
string sInput = Solicitação[sColor].Trim();
if(sInput.Comprimento == 0)
retornar;
string resultado = ;
string[] aColors = novo string[]{aliceblue,antiguidadecom,água-marinha,azul,bege,bisque,preto,amêndoa branqueada,azul,azulvioleta,latão,bronze,marrom,burlywood,cadetblue,chartreuse,chocolate,cobre,coral,cornfloewrb lue, seda de milho, ciano, azul escuro, ciano escuro, vara de ouro escuro, cinza escuro, verde escuro, cáqui, magenta escuro, verde escuro, orquídea escura, korenge escuro, vermelho escuro, salmão escuro, verde escuro, azul escuro, ardósia escura cinza, turquesa escura, violeta escuro, rosa profundo, azul profundo, cinza escuro, dodgerblue, feldspato, tijolo refratário, branco floral, verde floresta, fúcsia, gainsboro, ouro, goldenrod, golenrod, gostwhite, cinza, verde, esverdeado amarelo, melada, rosa quente, vermelho indiano, inen, marfim, cáqui, lavanda, lavanda blush, gramado, chiffon limão, azul claro, coral claro, ciano claro, lightgodenrod, lightgodenrodyellow, cinza claro, verde claro, eu rosa claro, salmão claro, verde claro, azul claro, azul claro, azul claro, cinza claro, azul claro, amarelo claro, limão, verde limão, magenta, magenta, maroom, marrom, médio água marinha, azul médio, medi umorquídea, purpul médio, verde mar médio, azul ardósia médio, verde primavera médio, turquesa médio, vermelho violeta médio, azul meia-noite, creme de menta, rosa enevoada, mocassim, branco navajo, marinho, azul marinho, renda antiga, oli vedrab, laranja, orquídea, orangered, palegodenrod, verde claro, turquesa pálida, vermelho palevioleta, mamão, pêssego, peru, rosa, ameixa, azul pó, roxo, quartzo, vermelho, marrom rosado, azul real, marrom sela, sal segunda-feira, marrom-arenoso, escarlate, verde-mar, concha do mar, sienna, prata, azul-celeste, cinza-ardósia, neve, verde-primavera, azul-aço, bronzeado, cardo, tomate, turquesa, violeta, vermelho-violeta, trigo, fumaça branca, amarelo, verde-amarelo};
for(int i=0;i<aColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ,;
}
if(sResult.Length>0) //Se houver uma correspondência
sResult = sResult.Substring(0,sResult.Length-1);
Response.Write(sResult);
%>