Verwenden Sie JavaScript, um ein Textfeld mit automatischen Eingabeaufforderungen zu erstellen. Freunde, die es benötigen, können darauf verweisen. Beispiel 1: AJAX-Implementierung direkt schreiben.
Kunde:
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<Kopf>
<title>Ajax realisiert ein automatisches Eingabeaufforderungstextfeld</title>
<Stil>
<!--
Körper{
Schriftfamilie:Arial, Helvetica, serifenlos;
Schriftgröße:12px; padding:0px;marge:5px;
}
form{padding:0px; margin:0px;}
Eingang{
/* Stil des Benutzereingabefelds */
Schriftfamilie:Arial, Helvetica, serifenlos;
Schriftgröße:12px; Rand:1px durchgezogen #000000;
width:200px; padding:1px; margin:0px;
}
#popup{
/* Stil des Eingabeaufforderungsfeld-Div-Blocks */
Position:absolut; Breite:202px;
Farbe:#004a7e; Schriftgröße:12px;
Schriftfamilie:Arial, Helvetica, serifenlos;
links:41px; oben:25px;
}
#popup.show{
/* Zeigt den Rand des Eingabeaufforderungsfelds an */
border:1px solid #004a7e;
}
#popup.hide{
/* Den Rand des Eingabeaufforderungsfelds ausblenden*/
Grenze:keine;
}
/* Stil der Eingabeaufforderungsbox*/
ul{
Listenstil:none;
margin:0px; padding:0px;
}
li.mouseOver{
Hintergrundfarbe:#004a7e;
Farbe:#FFFFFF;
}
li.mouseOut{
Hintergrundfarbe:#FFFFFF;
Farbe:#004a7e;
}
->
</style>
<Skriptsprache=Javascript>
var oInputField; //In Anbetracht dessen, dass es in vielen Funktionen verwendet wird
var oPopDiv; //Es liegt also in Form einer globalen Variablen vor
var oColorsUl;
var xmlHttp;
Funktion createXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp = neues ActiveXObject(Microsoft.XMLHTTP);
sonst if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
Funktion initVars(){
//Variablen initialisieren
oInputField = document.forms[myForm1].colors;
oPopDiv = document.getElementById(popup);
oColorsUl = document.getElementById(colors_ul);
}
Funktion clearColors(){
//Löschen Sie den Inhalt der Eingabeaufforderung
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = verstecken;
}
Funktion setColors(the_colors){
//Ein Eingabeaufforderungsfeld anzeigen und der übergebene Parameter ist ein Array, das aus den übereinstimmenden Ergebnissen besteht.
clearColors(); //Löschen Sie jedes Mal, wenn Sie einen Buchstaben eingeben, die ursprüngliche Eingabeaufforderung, bevor Sie fortfahren.
oPopDiv.className = show;
var oLi;
for(var i=0;i<the_colors.length;i++){
//Zeigen Sie dem Benutzer nacheinander passende Eingabeaufforderungsergebnisse an
oLi = document.createElement(li);
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = function(){
this.className = mouseOver; //Hervorheben, wenn die Maus darüber fährt
}
oLi.onmouseout = function(){
this.className = mouseOut; //Beim Verlassen den ursprünglichen Zustand wiederherstellen
}
oLi.onclick = function(){
//Wenn der Benutzer auf ein passendes Element klickt, wird das Eingabefeld auf den Wert des Elements gesetzt
oInputField.value = this.firstChild.nodeValue;
clearColors(); //Löschen Sie gleichzeitig das Eingabeaufforderungsfeld
}
}
}
Funktion findColors(){
initVars(); //Variablen initialisieren
if(oInputField.value.length > 0){
createXMLHttpRequest(); //Benutzereingaben an den Server senden
var sUrl = 9-10.aspx?sColor= + oInputField.value + ×tamp= + 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); //Serverergebnisse anzeigen
}
anders
clearColors();
}
}
xmlHttp.send(null);
}
anders
clearColors(); //Das Eingabeaufforderungsfeld löschen, wenn keine Eingabe erfolgt (z. B. wenn der Benutzer die Entf-Taste drückt)
}
</script>
</head>
<Körper>
<form method=post name=myForm1>
Farbe: <input type=text name=colors id=colors onkeyup=findColors( />
</form>
<div id=popup>
<ul id=colors_ul></ul>
</div>
</body>
</html>
Serverseitig (9-10.aspx):
Kopieren Sie den Codecode wie folgt:
<%@ Page Language=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ Import Namespace=System.Data %>
<%
Response.CacheControl = kein Cache;
Response.AddHeader(Pragma,no-cache);
string sInput = Request[sColor].Trim();
if(sInput.Length == 0)
zurückkehren;
string sResult = ;
string[] aColors = neu string[]{aliceblue,antiquewith,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,brass,bronze,brown,burlywood,cadetblue,chartreuse,chocolate,copper,coral,cornfloewrb Lue, Cornsilk, Cyan, Dunkelblau, Darkcyan, Darkgoldenrod, Darkgray, Darkgreen, Darkkhaki, Darkmagenta, Darkolivegreen, Darkorchid, Darkorenge, Darkred, Darksalmon, Darkseagreen, Darkslateblue, Darkslate Grau, Dunkeltürkis, Dunkelviolett, Dunkelrosa, Dunkelblau, Dunkelgrau, Dodgerblau, Feldspat, Schamottstein, Blumenweiß, Waldgrün, Fuchsia, Gainsboro, Gold, Goldrute, Golenrute, Gostweiß, Grau, Grün, Grün ellow, honeydew, hotpink, indianred, inen, elfenbein, khaki, lavendel, lavenderblush, rasengrün, zitronenchiffon, hellblau, hellkoralle, hellcyan, hellgodenrod, hellgodenrodgelb, hellgrau, hellgrün, l Hellrosa, Helllachs, Hellseegrün, Hellhimmelblau, Hellschieferblau, Hellschiefergrau, Hellstahlblau, Hellgelb, Limette, Limettengrün, Magenta, Magenta, Maroon, Kastanienbraun, Mittelaquamarin, Mittelblau, Medi umorchid, mittelpurpur, mittelseegrün, mittelschieferblau, mittelfrühlingsgrün, mitteltürkis, mittelviolett, mitternachtsblau, mintcreme, mistyrose, mokassin, navajoweiß, marine, marineblau, altspitze, oli vedrab,orange,orchid,orengered,palegodenrod,blassgrün,blasstürkis,blassviolettrot,papayawhip,pfirsichpuff,peru,rosa,pflaume,puderblau,lila,quarz,rot,rosenbraun,königsblau,sattelbraun,sal mon, sandbraun, scharlachrot, seegrün, muschel, siena, silber, himmelblau, schiefergrau, schnee, frühlingsgrün, stahlblau, tan, distel, tomate, türkis, violett, violettrot, weizen, weißrauch, gelb, gelbgrün};
for(int i=0;i<aColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ,;
}
if(sResult.Length>0) //Wenn es eine Übereinstimmung gibt
sResult = sResult.Substring(0,sResult.Length-1); //Letzte Zahl entfernen
Response.Write(sResult);
%>
Beispiel 2: Mit jQuery implementiert.
Kunde:
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<Kopf>
<title>JQuery implementiert ein automatisches Eingabeaufforderungstextfeld</title>
<Stil>
<!--
Körper{
Schriftfamilie:Arial, Helvetica, serifenlos;
Schriftgröße:12px; padding:0px;marge:5px;
}
form{padding:0px; margin:0px;}
Eingang{
/* Stil des Benutzereingabefelds */
Schriftfamilie:Arial, Helvetica, serifenlos;
Schriftgröße:12px; Rand:1px durchgezogen #000000;
width:200px; padding:1px; margin:0px;
}
#popup{
/* Stil des Eingabeaufforderungsfeld-Div-Blocks */
Position:absolut; Breite:202px;
Farbe:#004a7e; Schriftgröße:12px;
Schriftfamilie:Arial, Helvetica, serifenlos;
links:41px; oben:25px;
}
#popup.show{
/* Zeigt den Rand des Eingabeaufforderungsfelds an */
border:1px solid #004a7e;
}
/* Stil der Eingabeaufforderungsbox*/
ul{
Listenstil:none;
margin:0px; padding:0px;
Farbe:#004a7e;
}
li.mouseOver{
Hintergrundfarbe:#004a7e;
Farbe:#FFFFFF;
}
->
</style>
<script language=javascript src=jquery.min.js></script>
<Skriptsprache=Javascript>
var oInputField; //In Anbetracht dessen, dass es in vielen Funktionen verwendet wird
var oPopDiv; //Es liegt also in Form einer globalen Variablen vor
var oColorsUl;
Funktion initVars(){
//Variablen initialisieren
oInputField = $(#colors);
oPopDiv = $(#popup);
oColorsUl = $(#colors_ul);
}
Funktion clearColors(){
//Löschen Sie den Inhalt der Eingabeaufforderung
oColorsUl.empty();
oPopDiv.removeClass(show);
}
Funktion setColors(the_colors){
//Ein Eingabeaufforderungsfeld anzeigen und der übergebene Parameter ist ein Array, das aus den übereinstimmenden Ergebnissen besteht.
clearColors(); //Löschen Sie jedes Mal, wenn Sie einen Buchstaben eingeben, die ursprüngliche Eingabeaufforderung, bevor Sie fortfahren.
oPopDiv.addClass(show);
for(var i=0;i<the_colors.length;i++)
//Zeigen Sie dem Benutzer nacheinander passende Eingabeaufforderungsergebnisse an
oColorsUl.append($(<li>+the_colors[i]+</li>));
oColorsUl.find(li).click(function(){
oInputField.val($(this).text());
clearColors();
}).schweben(
function(){$(this).addClass(mouseOver);},
function(){$(this).removeClass(mouseOver);}
);
}
Funktion findColors(){
initVars(); //Variablen initialisieren
if(oInputField.val().length > 0){
//Asynchrone Daten abrufen
$.get(14-10.aspx,{sColor:oInputField.val()},
Funktion(Daten){
var aResult = new Array();
if(data.length > 0){
aResult = data.split(,);
setColors(aResult); //Serverergebnisse anzeigen
}
anders
clearColors();
});
}
anders
clearColors(); //Das Eingabeaufforderungsfeld löschen, wenn keine Eingabe erfolgt (z. B. wenn der Benutzer die Entf-Taste drückt)
}
</script>
</head>
<Körper>
<form method=post name=myForm1>
Farbe: <input type=text name=colors id=colors onkeyup=findColors( />
</form>
<div id=popup>
<ul id=colors_ul></ul>
</div>
</body>
</html>
Serverseitig (14-10.aspx):
Kopieren Sie den Codecode wie folgt:
<%@ Page Language=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ Import Namespace=System.Data %>
<%
Response.CacheControl = kein Cache;
Response.AddHeader(Pragma,no-cache);
string sInput = Request[sColor].Trim();
if(sInput.Length == 0)
zurückkehren;
string sResult = ;
string[] aColors = neu string[]{aliceblue,antiquewith,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,brass,bronze,brown,burlywood,cadetblue,chartreuse,chocolate,copper,coral,cornfloewrb Lue, Cornsilk, Cyan, Dunkelblau, Darkcyan, Darkgoldenrod, Darkgray, Darkgreen, Darkkhaki, Darkmagenta, Darkolivegreen, Darkorchid, Darkorenge, Darkred, Darksalmon, Darkseagreen, Darkslateblue, Darkslate Grau, Dunkeltürkis, Dunkelviolett, Dunkelrosa, Dunkelblau, Dunkelgrau, Dodgerblau, Feldspat, Schamottstein, Blumenweiß, Waldgrün, Fuchsia, Gainsboro, Gold, Goldrute, Golenrute, Gostweiß, Grau, Grün, Grün ellow, honeydew, hotpink, indianred, inen, elfenbein, khaki, lavendel, lavenderblush, rasengrün, zitronenchiffon, hellblau, hellkoralle, hellcyan, hellgodenrod, hellgodenrodgelb, hellgrau, hellgrün, l Hellrosa, Helllachs, Hellseegrün, Hellhimmelblau, Hellschieferblau, Hellschiefergrau, Hellstahlblau, Hellgelb, Limette, Limettengrün, Magenta, Magenta, Maroon, Kastanienbraun, Mittelaquamarin, Mittelblau, Medi umorchid, mittelpurpur, mittelseegrün, mittelschieferblau, mittelfrühlingsgrün, mitteltürkis, mittelviolett, mitternachtsblau, mintcreme, mistyrose, mokassin, navajoweiß, marine, marineblau, altspitze, oli vedrab,orange,orchid,orengered,palegodenrod,blassgrün,blasstürkis,blassviolettrot,papayawhip,pfirsichpuff,peru,rosa,pflaume,puderblau,lila,quarz,rot,rosenbraun,königsblau,sattelbraun,sal mon, sandbraun, scharlachrot, seegrün, muschel, siena, silber, himmelblau, schiefergrau, schnee, frühlingsgrün, stahlblau, tan, distel, tomate, türkis, violett, violettrot, weizen, weißrauch, gelb, gelbgrün};
for(int i=0;i<aColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ,;
}
if(sResult.Length>0) //Wenn es eine Übereinstimmung gibt
sResult = sResult.Substring(0,sResult.Length-1); //Letzte Zahl entfernen
Response.Write(sResult);
%>