Page d'accueil>Tutoriel de programmation réseau>Tutoriel ASP

ASP imite Google suggère le style pour réaliser l'effet de menu déroulant

Auteur：Eve Cole Date de mise à jour：2025-03-07 15:00:04

Cet article présente principalement ASP pour imiter le style Google suggère pour réaliser l'effet de menu déroulant.

Aujourd'hui, j'utiliserai ASP pour imiter le menu déroulant Google Sugget Style et télécharger directement le code

1. Code de premier plan:

  1. <% @ Lingots = javascriptcodepage = 936%>
  2. <! Doctypehtmlpublic - // w3c // dtdxhtml1.0transitional // en
  4. http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
  5. <htmlxmlns = http: //www.w3.org/1999/xhtml>
  6. <Styletype = Text / CSS>
  7. <! -
  8. .style1 {Color: # FF0000}
  9. .
  10. {
  11. taille de police: 12px;
  12. Contexte: # 708090;
  13. Couleur: #fffafa;
  14. }
  16. .
  17. {
  18. taille de police: 12px;
  19. Contexte: #fffafa;
  20. Couleur: # 000000;
  21. }
  22. ->
  23. </ style>
  24. <ScriptType = Text / JavaScriptLanguage = JavaScript>
  25. varxmlHttp;
  26. varCompletediv;
  27. Variinputfield;
  28. varnamétable;
  29. VarNametable Fody;
  30. varflag = false;
  32. functionCreateExmlHttpRequest () {
  33. if (window.activexobject) {
  34. xmlHttp = newActiveXObject (Microsoft.xmlHttp);
  35. }
  36. elseif (window.xmlhttprequest) {
  37. xmlHttp = newXmlHttpRequest ();
  38. }
  39. }
  41. functionsetflag () {
  42. Flag = true;
  43. }
  45. FunctionDisselect ()
  46. {
  47. if (drap == false)
  48. document.getElementById (popup) .style.display = aucun;
  49. }
  51. functionInitvars () {
  52. inputField = document.getElementById (frmchangshang);
  53. nametable = document.getElementById (name_table);
  54. CompletedIv = document.getElementById (popup);
  55. nametableBody = document.getElementById (name_table_body);
  56. document.getElementById (popup) .style.display = block;
  57. }
  59. functionFindNames () {
  60. initvars ();
  61. if (inputfield.value.length> 0)
  62. {
  63. createExmlHttpRequest ();
  64. varurl = search.asp? names = + inputfield.value;
  65. xmlhttp.open (get, url, true);
  66. xmlhttp.onreadystateChange = callback;
  67. xmlhttp.send (null);
  68. }
  69. autre
  70. {
  71. clearNames ();
  72. }
  73. }
  75. functionCallback () {
  76. if (xmlhttp.readystate == 4) {
  77. if (xmlhttp.status == 200)
  78. {
  79. essayer
  80. {
  81. varName = xmlhttp.Responsexml.getElementsByTagName (nom)
  83. [0] .Firstchild.data;
  84. }
  85. attraper (e)
  86. {
  87. document.getElementById (popup) .style.display = aucun;
  88. clearNames ();
  89. }
  90. setNames (xmlhttp.Responsexml.getElementsByTagName (contenu));
  91. }
  92. elseif (xmlhttp.status == 204)
  93. {
  94. clearNames ();
  95. }
  96. }
  97. }
  99. functionSetNames (the_names) {
  100. clearNames ();
  101. varsize = the_names.length;
  102. mots de final ();
  103. Varrow, cellule, portées;
  104. pour (vari = 0; i <size; i ++) {
  105. //varnextNode=the_Names ·i
  106. Vare = the_ames [i];
  107. // Obtenez le contenu du nœud enfant et rechargez-le dans un tableau
  108. varNextNode = e.getElementsByTagName (name) [0] .FirstChild.data;
  109. // Créer des éléments TR, TD, Span
  110. row = document.CreateElement (tr);
  111. Cell = document.CreateElement (TD);
  112. //spans=Document.CreateElement(SPAN);
  113. // Définir les propriétés des cellules
  114. Cell.OnMouseout = function () {this.className = 'MouseOver'; Flag = false;};
  115. Cell.onMouseOver = function () {this.className = 'Mouseout'; Flag = True;};
  116. Cell.SetAttribute (bgcolor, # fffafa);
  117. Cell.SetAttribute (bordure, 0);
  118. //Cell.SetAttribute (OnMouseOver, setFlag ());
  119. Cell.OnClick = function () {popUlaTename (this);};
  120. // Ajouter NextNode à TD
  121. vartxtName = document.CreateTextNode (nextNode);
  122. Cell.ApendChild (txtName);
  123. // Chargez les données cachées pour courir l'élément
  124. Row.ApendChild (cellule);
  125. nametablebody.appendChild (row);
  126. }
  127. }
  129. functionSetOffSets () {
  130. vand = inputfield.offsetwidth;
  131. Varleft = CalculateOffSetLeft (InputField);
  132. vartop = calculoffsetTop (inputfield) + inputfield.offsetheight;
  134. EXECHEDIV.STYLE.BORDER = BLACK1PXSOLID;
  135. finiv.style.left = gauche + px;
  136. finiv.style.top = top + px;
  137. nametable.style.width = 400px;
  138. }
  140. fonctionCalculateOffsetLeft (champ) {
  141. returnCalculateOffset (champ, offsetLeft);
  142. }
  144. fonctionCalculateOffsetTop (champ) {
  145. returnCalculateOffset (champ, offsetOp);
  146. }
  148. fonctionCalculateOffset (champ, att) {
  149. varoffset = 0;
  150. while (champ) {
  151. offset + = champ [att];
  152. champ = champ.OffsetParent;
  153. }
  154. returnoffset;
  155. }
  157. functionPopulaTename (cell) {
  158. // Remplissez les données de la page Web, cellule ----> objet TD
  159. inputfield.value = cell.firstchild.nodevalue;
  160. clearNames ();
  161. }
  162. // effacer le tableau de liste
  163. FunctionClearNames () {
  164. varind = nametablebody.childnodes.length;
  165. pour (vari = ind-1; i> = 0; i -) {
  166. nametablebody.removechild (nametablebody.childnodes [i]);
  167. }
  168. EXECHEDIV.STYLE.BBORDER = None;
  169. }
  170. </cript>
  171. <adal>
  172. <Metahttp-Equiv = Content-TypeContent = Text / Html; charSet = GB2312 />
  173. <Title> UntitledDocument </Title>
  174. </ head>
  176. <body>
  177. <inputName = frmchangshangClass = inputText = frmchangshangstyle = width: 250px;
  179. onblur = disselect (); onkeyup = findNames (); size = 50maxLength = 100>
  180. <spanclass = style1> Astuce: entrez les mots clés et le programme vous correspondra automatiquement à partir de la bibliothèque
  182. Si le dossier n'est pas présent, remplissez-le vous-même
  183. </span>
  184. <divStyle = Position: Absolut; Top: 0; gauche: 0; id = popup>
  185. <TableId = name_TableBgColor = # fffaFaborder = 0CellSpacing = 0
  187. CellPadding = 0>
  188. <tbody = name_table_body> </ tbody>
  189. </ table>
  190. </div>
  191. </docy>
  192. </html>

2. Recherche backend.ASP Page de données de requête asynchrone

Changez simplement l'instruction SQL et les champs à afficher au format correspondant de votre propre base de données.

  1. <! - # inclueVirtual = Conn.asp ->
  2. <%
  3. Keyword = request.QueryString (noms)
  4. sql = selectlgid, lgmcfromgwherelgmclike '% & keyword &%' orderBylgidDesc
  5. setrs = server.createObject (adodb.recordSet)
  6. Rs.OpenSQL, Conn, 1,1
  7. Response.ContentType = Text / Xml
  8. réponse.write <? xmlversion = 1.0encoding = gb2312?>
  9. réponse.Write <Sporm>
  10. dowhilenotrs.eof
  11. réponse.write <honiet>
  12. réponse.write <name> & rs (lgmc) & </name>
  13. 'Response.Write <DeurId> & Rs (UserId) & </DERIDID>
  14. 'Response.Write <Dartime> & Rs (startime) & </ Startime>
  15. 'Response.Write <Tentime> & Rs (Endtime) & </Dedtime>
  16. réponse.write </thom
  17. Rs.MovEnext
  18. boucle
  19. réponse.write </ponse>
  20. Rs.Close
  21. setrs = rien
  22. %>

Ce qui précède est le code pour ASP pour imiter le style Google suggérer pour réaliser l'effet de menu déroulant.

Articles connexes