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:
- <% @ Lingots = javascriptcodepage = 936%>
- <! Doctypehtmlpublic - // w3c // dtdxhtml1.0transitional // en
- http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
- <htmlxmlns = http: //www.w3.org/1999/xhtml>
- <Styletype = Text / CSS>
- <! -
- .style1 {Color: # FF0000}
- .
- {
- taille de police: 12px;
- Contexte: # 708090;
- Couleur: #fffafa;
- }
- .
- {
- taille de police: 12px;
- Contexte: #fffafa;
- Couleur: # 000000;
- }
- ->
- </ style>
- <ScriptType = Text / JavaScriptLanguage = JavaScript>
- varxmlHttp;
- varCompletediv;
- Variinputfield;
- varnamétable;
- VarNametable Fody;
- varflag = false;
- functionCreateExmlHttpRequest () {
- if (window.activexobject) {
- xmlHttp = newActiveXObject (Microsoft.xmlHttp);
- }
- elseif (window.xmlhttprequest) {
- xmlHttp = newXmlHttpRequest ();
- }
- }
- functionsetflag () {
- Flag = true;
- }
- FunctionDisselect ()
- {
- if (drap == false)
- document.getElementById (popup) .style.display = aucun;
- }
- functionInitvars () {
- inputField = document.getElementById (frmchangshang);
- nametable = document.getElementById (name_table);
- CompletedIv = document.getElementById (popup);
- nametableBody = document.getElementById (name_table_body);
- document.getElementById (popup) .style.display = block;
- }
- functionFindNames () {
- initvars ();
- if (inputfield.value.length> 0)
- {
- createExmlHttpRequest ();
- varurl = search.asp? names = + inputfield.value;
- xmlhttp.open (get, url, true);
- xmlhttp.onreadystateChange = callback;
- xmlhttp.send (null);
- }
- autre
- {
- clearNames ();
- }
- }
- functionCallback () {
- if (xmlhttp.readystate == 4) {
- if (xmlhttp.status == 200)
- {
- essayer
- {
- varName = xmlhttp.Responsexml.getElementsByTagName (nom)
- [0] .Firstchild.data;
- }
- attraper (e)
- {
- document.getElementById (popup) .style.display = aucun;
- clearNames ();
- }
- setNames (xmlhttp.Responsexml.getElementsByTagName (contenu));
- }
- elseif (xmlhttp.status == 204)
- {
- clearNames ();
- }
- }
- }
- functionSetNames (the_names) {
- clearNames ();
- varsize = the_names.length;
- mots de final ();
- Varrow, cellule, portées;
- pour (vari = 0; i <size; i ++) {
- //varnextNode=the_Names ·i
- Vare = the_ames [i];
- // Obtenez le contenu du nœud enfant et rechargez-le dans un tableau
- varNextNode = e.getElementsByTagName (name) [0] .FirstChild.data;
- // Créer des éléments TR, TD, Span
- row = document.CreateElement (tr);
- Cell = document.CreateElement (TD);
- //spans=Document.CreateElement(SPAN);
- // Définir les propriétés des cellules
- Cell.OnMouseout = function () {this.className = 'MouseOver'; Flag = false;};
- Cell.onMouseOver = function () {this.className = 'Mouseout'; Flag = True;};
- Cell.SetAttribute (bgcolor, # fffafa);
- Cell.SetAttribute (bordure, 0);
- //Cell.SetAttribute (OnMouseOver, setFlag ());
- Cell.OnClick = function () {popUlaTename (this);};
- // Ajouter NextNode à TD
- vartxtName = document.CreateTextNode (nextNode);
- Cell.ApendChild (txtName);
- // Chargez les données cachées pour courir l'élément
- Row.ApendChild (cellule);
- nametablebody.appendChild (row);
- }
- }
- functionSetOffSets () {
- vand = inputfield.offsetwidth;
- Varleft = CalculateOffSetLeft (InputField);
- vartop = calculoffsetTop (inputfield) + inputfield.offsetheight;
- EXECHEDIV.STYLE.BORDER = BLACK1PXSOLID;
- finiv.style.left = gauche + px;
- finiv.style.top = top + px;
- nametable.style.width = 400px;
- }
- fonctionCalculateOffsetLeft (champ) {
- returnCalculateOffset (champ, offsetLeft);
- }
- fonctionCalculateOffsetTop (champ) {
- returnCalculateOffset (champ, offsetOp);
- }
- fonctionCalculateOffset (champ, att) {
- varoffset = 0;
- while (champ) {
- offset + = champ [att];
- champ = champ.OffsetParent;
- }
- returnoffset;
- }
- functionPopulaTename (cell) {
- // Remplissez les données de la page Web, cellule ----> objet TD
- inputfield.value = cell.firstchild.nodevalue;
- clearNames ();
- }
- // effacer le tableau de liste
- FunctionClearNames () {
- varind = nametablebody.childnodes.length;
- pour (vari = ind-1; i> = 0; i -) {
- nametablebody.removechild (nametablebody.childnodes [i]);
- }
- EXECHEDIV.STYLE.BBORDER = None;
- }
- </cript>
- <adal>
- <Metahttp-Equiv = Content-TypeContent = Text / Html; charSet = GB2312 />
- <Title> UntitledDocument </Title>
- </ head>
- <body>
- <inputName = frmchangshangClass = inputText = frmchangshangstyle = width: 250px;
- onblur = disselect (); onkeyup = findNames (); size = 50maxLength = 100>
- <spanclass = style1> Astuce: entrez les mots clés et le programme vous correspondra automatiquement à partir de la bibliothèque
- Si le dossier n'est pas présent, remplissez-le vous-même
- </span>
- <divStyle = Position: Absolut; Top: 0; gauche: 0; id = popup>
- <TableId = name_TableBgColor = # fffaFaborder = 0CellSpacing = 0
- CellPadding = 0>
- <tbody = name_table_body> </ tbody>
- </ table>
- </div>
- </docy>
- </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.
- <! - # inclueVirtual = Conn.asp ->
- <%
- Keyword = request.QueryString (noms)
- sql = selectlgid, lgmcfromgwherelgmclike '% & keyword &%' orderBylgidDesc
- setrs = server.createObject (adodb.recordSet)
- Rs.OpenSQL, Conn, 1,1
- Response.ContentType = Text / Xml
- réponse.write <? xmlversion = 1.0encoding = gb2312?>
- réponse.Write <Sporm>
- dowhilenotrs.eof
- réponse.write <honiet>
- réponse.write <name> & rs (lgmc) & </name>
- 'Response.Write <DeurId> & Rs (UserId) & </DERIDID>
- 'Response.Write <Dartime> & Rs (startime) & </ Startime>
- 'Response.Write <Tentime> & Rs (Endtime) & </Dedtime>
- réponse.write </thom
- Rs.MovEnext
- boucle
- réponse.write </ponse>
- Rs.Close
- setrs = rien
- %>
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.