Utilisez JavaScript pour créer une zone de texte avec des invites automatiques. Les amis qui en ont besoin peuvent s'y référer. Exemple 1 : écrivez directement l'implémentation AJAX.
Client:
Copiez le code comme suit :
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<tête>
<title>Ajax réalise une zone de texte d'invite automatique</title>
<style>
<!--
corps{
famille de polices : Arial, Helvetica, sans-serif ;
taille de police : 12 px ; remplissage : 0 px ; marge : 5 px ;
}
formulaire{padding:0px; marge:0px;}
saisir{
/* Style de la zone de saisie utilisateur */
famille de polices : Arial, Helvetica, sans-serif ;
taille de police : 12 px ; bordure : 1 px solide #000000 ;
largeur : 200 px ; remplissage : 1 px ; marge : 0 px ;
}
#surgir{
/* Style du bloc div de la boîte d'invite */
position : absolue ; largeur : 202 px ;
couleur : #004a7e ; taille de police : 12 px ;
famille de polices : Arial, Helvetica, sans-serif ;
gauche : 41 px ; haut : 25 px ;
}
#popup.show{
/* Afficher la bordure de la boîte d'invite */
bordure : 1px solide #004a7e ;
}
#popup.hide{
/* Masquer la bordure de la boîte d'invite*/
bordure : aucune ;
}
/* Style de la boîte d'invite*/
ul{
style de liste : aucun ;
marge :0px ; remplissage :0px ;
}
li.mouseOver{
couleur d'arrière-plan : #004a7e ;
couleur :#FFFFFF ;
}
li.mouseOut{
couleur d'arrière-plan :#FFFFFF ;
couleur : #004a7e ;
}
-->
</style>
<langage de script=javascript>
var oInputField; //Considérant qu'il est utilisé dans de nombreuses fonctions
var oPopDiv; //Il se présente donc sous la forme d'une variable globale
var oColorsUl;
var xmlHttp;
fonction createXMLHttpRequest(){
si (fenêtre.ActiveXObject)
xmlHttp = nouveau ActiveXObject(Microsoft.XMLHTTP);
sinon si (window.XMLHttpRequest)
xmlHttp = nouveau XMLHttpRequest();
}
fonction initVars(){
//Initialiser les variables
oInputField = document.forms[myForm1].colors ;
oPopDiv = document.getElementById(popup);
oColorsUl = document.getElementById(colors_ul);
}
fonction clearColors(){
//Effacer le contenu de l'invite
pour(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = cacher ;
}
fonction setColors(the_colors){
//Affiche une boîte de dialogue et le paramètre transmis est un tableau composé des résultats correspondants.
clearColors(); //Chaque fois que vous saisissez une lettre, effacez l'invite d'origine avant de continuer.
oPopDiv.className = show;
var oLi;
pour(var i=0;i<the_colors.length;i++){
//Afficher les résultats de l'invite correspondante à l'utilisateur un par un
oLi = document.createElement(li);
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = fonction(){
this.className = mouseOver; //Mise en surbrillance lorsque la souris passe dessus
}
oLi.onmouseout = fonction(){
this.className = mouseOut; // Restaurer l'état d'origine en quittant
}
oLi.onclick = fonction(){
//Lorsque l'utilisateur clique sur un élément correspondant, définissez la zone de saisie sur la valeur de l'élément
oInputField.value = this.firstChild.nodeValue ;
clearColors(); //Effacer la boîte de dialogue en même temps
}
}
}
fonction findColors(){
initVars(); //Initialiser les variables
si (oInputField.value.length > 0){
createXMLHttpRequest(); //Envoyer l'entrée de l'utilisateur au serveur
var sUrl = 9-10.aspx?sColor= + oInputField.value + ×tamp= + new Date().getTime();
xmlHttp.open(GET,sUrl,true);
xmlHttp.onreadystatechange = fonction(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var aResult = nouveau tableau ();
si(xmlHttp.responseText.length){
aResult = xmlHttp.responseText.split(,);
setColors(aResult); //Afficher les résultats du serveur
}
autre
clearColors();
}
}
xmlHttp.send(null);
}
autre
clearColors(); //Efface la boîte de dialogue lorsqu'il n'y a aucune entrée (par exemple, l'utilisateur appuie sur la touche Suppr)
}
</script>
</tête>
<corps>
<form method=post name=myForm1>
Couleur : <input type=text name=colors id=colors onkeyup=findColors( />);
</form>
<identifiant div=popup>
<ul id=colors_ul></ul>
</div>
</corps>
</html>
Côté serveur (9-10.aspx) :
Copiez le code comme suit :
<%@ Page Language=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ Importer l'espace de noms=System.Data %>
<%
Response.CacheControl = pas de cache ;
Response.AddHeader (Pragma, sans cache);
chaîne sInput = Request[sColor].Trim();
si(sInput.Length == 0)
retour;
chaîne sResult = ;
string[] aColors = nouveau string[]{aliceblue,antiquewith,aigue-marine,azur,beige,bisque,noir,blanchedalmond,bleu,bleuviolet,laiton,bronze,marron,burlywood,bleu cadet,chartreuse,chocolat,cuivre,corail,cornfloewrb lue, soie de maïs, cyan, bleu foncé, cyan foncé, verge d'or foncé, gris foncé, vert foncé, kaki foncé, agenta foncé, vert olive foncé, darkorchid, darkorenge, rouge foncé, saumon foncé, vert mer foncé, bleu ardoise foncé, ardoise foncée gris, turquoise foncé, violet foncé, rose profond, bleu ciel profond, dimgray, bleu dodger, feldspath, brique réfractaire, blanc floral, vert forêt, fuchsia, gainsboro, or, verge d'or, tige de golen, gostwhite, gris, vert, verdoyant jaune, miellat, rose vif, rouge indien, inen, ivoire, kaki, lavande, lavande, vert pelouse, mousseline de citron, bleu clair, corail clair, cyan clair, tige claire, tige jaune clair, gris clair, vert clair, l rose clair, saumon clair, vert mer clair, bleu ciel clair, bleu ardoise clair, gris ardoise clair, bleu acier clair, jaune clair, citron vert, vert citron, magenta, magenta, maroom, marron, mediumaquamarine, bleu moyen, medi umorchid, mediumpurpul, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, mocassin, navajowhite, marine, bleu marine, oldlace, oli vedrab, orange, orchidée, orengered, palegodenrod, vert pâle, paleturquoise, palevioletred, papayawhip, pêcher, pérou, rose, prune, bleu poudre, violet, quartz, rouge, brun rosé, bleu royal, marron selle, sal lun, brun sable, écarlate, vert d'eau, coquillage, terre de Sienne, argent, bleu ciel, gris ardoise, neige, vert printemps, bleu acier, beige, chardon, tomate, turquoise, violet, rouge violet, blé, fumée blanche, jaune, vert jaune} ;
pour(int i=0;i<aColors.Length;i++){
si(aColors[i].IndexOf(sInput) == 0)
sRésultat += aCouleurs[i] + ,;
}
if(sResult.Length>0) //S'il y a une correspondance
sResult = sResult.Substring(0,sResult.Length-1); //Supprimer le dernier numéro
Réponse.Write(sResult);
%>
Exemple 2 : implémenté à l'aide de jQuery.
Client:
Copiez le code comme suit :
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<tête>
<title>JQuery implémente une zone de texte d'invite automatique</title>
<style>
<!--
corps{
famille de polices : Arial, Helvetica, sans-serif ;
taille de police : 12 px ; remplissage : 0px ; marge : 5px ;
}
formulaire{padding:0px; marge:0px;}
saisir{
/* Style de la zone de saisie utilisateur */
famille de polices : Arial, Helvetica, sans-serif ;
taille de police : 12 px ; bordure : 1 px solide #000000 ;
largeur : 200 px ; remplissage : 1 px ; marge : 0 px ;
}
#surgir{
/* Style du bloc div de la boîte d'invite */
position : absolue ; largeur : 202 px ;
couleur : #004a7e ; taille de police : 12 px ;
famille de polices : Arial, Helvetica, sans-serif ;
gauche : 41 px ; haut : 25 px ;
}
#popup.show{
/* Afficher la bordure de la boîte d'invite */
bordure : 1px solide #004a7e ;
}
/* Style de la boîte d'invite*/
ul{
style de liste : aucun ;
marge : 0px ; remplissage : 0px ;
couleur : #004a7e ;
}
li.mouseOver{
couleur d'arrière-plan : #004a7e ;
couleur :#FFFFFF ;
}
-->
</style>
<script langage=javascript src=jquery.min.js></script>
<langage de script=javascript>
var oInputField; //Considérant qu'il est utilisé dans de nombreuses fonctions
var oPopDiv; //Il se présente donc sous la forme d'une variable globale
var oColorsUl;
fonction initVars(){
//Initialiser les variables
oInputField = $(#colors);
oPopDiv = $(#popup);
oColorsUl = $(#colors_ul);
}
fonction clearColors(){
//Effacer le contenu de l'invite
oColorsUl.empty();
oPopDiv.removeClass(show);
}
fonction setColors(the_colors){
//Affiche une boîte de dialogue et le paramètre transmis est un tableau composé des résultats correspondants.
clearColors(); //Chaque fois que vous saisissez une lettre, effacez l'invite d'origine avant de continuer.
oPopDiv.addClass(show);
pour(var i=0;i<the_colors.length;i++)
//Afficher les résultats de l'invite correspondante à l'utilisateur un par un
oColorsUl.append($(<li>+the_colors[i]+</li>));
oColorsUl.find(li).click(function(){
oInputField.val($(this).text());
clearColors();
}).flotter(
function(){$(this).addClass(mouseOver);},
function(){$(this).removeClass(mouseOver);}
);
}
fonction findColors(){
initVars(); //Initialiser les variables
si(oInputField.val().length > 0){
//Obtenir des données asynchrones
$.get(14-10.aspx,{sColor:oInputField.val()},
fonction (données) {
var aResult = nouveau tableau ();
si (données.longueur > 0) {
aResult = data.split(,);
setColors(aResult); //Afficher les résultats du serveur
}
autre
clearColors();
});
}
autre
clearColors(); //Efface la boîte de dialogue lorsqu'il n'y a aucune entrée (par exemple, l'utilisateur appuie sur la touche Suppr)
}
</script>
</tête>
<corps>
<form method=post name=myForm1>
Couleur : <input type=text name=colors id=colors onkeyup=findColors( />);
</form>
<identifiant div=popup>
<ul id=colors_ul></ul>
</div>
</corps>
</html>
Côté serveur (14-10.aspx) :
Copiez le code comme suit :
<%@ Page Language=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ Importer l'espace de noms=System.Data %>
<%
Response.CacheControl = pas de cache ;
Response.AddHeader (Pragma, sans cache);
chaîne sInput = Request[sColor].Trim();
si(sInput.Length == 0)
retour;
chaîne sResult = ;
string[] aColors = nouveau string[]{aliceblue,antiquewith,aigue-marine,azur,beige,bisque,noir,blanchedalmond,bleu,bleuviolet,laiton,bronze,marron,burlywood,bleu cadet,chartreuse,chocolat,cuivre,corail,cornfloewrb lue, soie de maïs, cyan, bleu foncé, cyan foncé, verge d'or foncé, gris foncé, vert foncé, kaki foncé, agenta foncé, vert olive foncé, darkorchid, darkorenge, rouge foncé, saumon foncé, vert mer foncé, bleu ardoise foncé, ardoise foncée gris, turquoise foncé, violet foncé, rose profond, bleu ciel profond, dimgray, bleu dodger, feldspath, brique réfractaire, blanc floral, vert forêt, fuchsia, gainsboro, or, verge d'or, tige de golen, gostwhite, gris, vert, verdoyant jaune, miellat, rose vif, rouge indien, inen, ivoire, kaki, lavande, lavande, vert pelouse, mousseline de citron, bleu clair, corail clair, cyan clair, tige claire, tige jaune clair, gris clair, vert clair, l rose clair, saumon clair, vert mer clair, bleu ciel clair, bleu ardoise clair, gris ardoise clair, bleu acier clair, jaune clair, citron vert, vert citron, magenta, magenta, maroom, marron, mediumaquamarine, bleu moyen, medi umorchid, mediumpurpul, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, mocassin, navajowhite, marine, bleu marine, oldlace, oli vedrab, orange, orchidée, orengered, palegodenrod, vert pâle, paleturquoise, palevioletred, papayawhip, pêcher, pérou, rose, prune, bleu poudre, violet, quartz, rouge, brun rosé, bleu royal, marron selle, sal lun, brun sable, écarlate, vert d'eau, coquillage, terre de Sienne, argent, bleu ciel, gris ardoise, neige, vert printemps, bleu acier, beige, chardon, tomate, turquoise, violet, rouge violet, blé, fumée blanche, jaune, vert jaune} ;
pour(int i=0;i<aColors.Length;i++){
si(aColors[i].IndexOf(sInput) == 0)
sRésultat += aCouleurs[i] + ,;
}
if(sResult.Length>0) //S'il y a une correspondance
sResult = sResult.Substring(0,sResult.Length-1); //Supprimer le dernier numéro
Réponse.Write(sResult);
%>