Este artículo presenta principalmente ASP para imitar el estilo de Google Sugerir para lograr el efecto de menú desplegable que lo necesitan puede referirse a él.
Hoy usaré ASP para imitar el menú desplegable de estilo de Google Sugerir y cargar directamente el código
1. Código de primer plano:
- <%@Idioma = javascriptCodePage = 936%>
- <! DoctypehtmlPublic-// w3c // dtdxhtml1.0transitional // es
- http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd>
- <htmlxmlns = http: //www.w3.org/1999/xhtml>
- <styletype = text/css>
- <!-
- .style1 {color:#FF0000}
- .
- {
- tamaño de fuente: 12px;
- Antecedentes:#708090;
- Color: #fffafa;
- }
- .
- {
- tamaño de fuente: 12px;
- Antecedentes: #fffafa;
- Color:#000000;
- }
- ->
- </style>
- <scriptType = text/javaScriptLanguage = javaScript>
- varxmlhttp;
- varCompletediv;
- variinputfield;
- varnametable;
- Varnametable;
- varflag = false;
- FunctionCreatexMLHTTPREQUEST () {
- if (window.activexObject) {
- xmlhttp = newActivexObject (microsoft.xmlhttp);
- }
- elseif (window.xmlhttprequest) {
- xmlhttp = newxmlhttprequest ();
- }
- }
- functionsetflag () {
- bandera = verdadero;
- }
- functionDisselect ()
- {
- if (flag == falso)
- document.getElementById (emergente) .style.display = none;
- }
- functionInitVars () {
- inputfield = document.getElementById (frmchangshang);
- nametable = document.getElementById (name_table);
- completariv = document.getElementById (emergente);
- nametableBody = document.getElementById (name_table_body);
- document.getElementById (emergente) .style.display = block;
- }
- functionFindNames () {
- initvars ();
- if (inputfield.value.length> 0)
- {
- createExmlhttprequest ();
- varurl = search.asp? Names =+inputfield.Value;
- xmlhttp.open (get, url, verdadero);
- xmlhttp.onreadyStateChange = llamado;
- xmlhttp.send (nulo);
- }
- demás
- {
- ClearNames ();
- }
- }
- functionCallback () {
- if (xmlhttp.readyState == 4) {
- if (xmlhttp.status == 200)
- {
- intentar
- {
- varname = xmlhttp.responsexml.getElementsBytagName (nombre)
- [0] .firstchild.data;
- }
- captura (e)
- {
- document.getElementById (emergente) .style.display = none;
- ClearNames ();
- }
- setNames (xmlhttp.Responsexml.getElementsByTagName (content));
- }
- Elseif (xmlhttp.status == 204)
- {
- ClearNames ();
- }
- }
- }
- functionsetNames (the_names) {
- ClearNames ();
- varsize = the_names.length;
- setOffSets ();
- Varrow, célula, tramos;
- para (vari = 0; i <size; i ++) {
- //varnextnode=the_names[ifont>.firstchild.data;
- VARE = the_names [i];
- // Obtener el contenido del nodo infantil y volver a cargarlo en una matriz
- varNextNode = e.getElementsByTagName (nombre) [0] .firstchild.data;
- // Crear elementos TR, TD, SPAN
- fila = document.createElement (tr);
- celular = documento.createElement (TD);
- //spans=Document.CreateElement(Span);
- // Establecer propiedades de la celda
- celular.onmouseOut = function () {this.classname = 'mouseover'; flag = false;};
- celular.onmouseover = function () {this.classname = 'mouseout'; flag = true;};
- Cell.SetAttribute (bgcolor,#fffafa);
- Cell.SetAttribute (borde, 0);
- //cell.setAttribute (OnMouseOver, setFlag ());
- celular.OnClick = function () {populateName (this);};
- // Agregar NextNode a TD
- vartxtName = document.createTextNode (nextNode);
- Cell.AppendChild (txtname);
- // Cargar datos ocultos para abarcar el elemento
- fila.appendChild (celda);
- NametableBody.AppendChild (fila);
- }
- }
- functionsetOffSets () {
- varend = inputfield.OffSetWidth;
- varleft = calculateFoffSetleft (InputField);
- vartop = calculalOffSettop (inputfield)+inputfield.offsetheight;
- completadoiv.style.border = black1pxsolid;
- completadoiv.style.left = izquierda+px;
- completadoiv.style.top = top+px;
- nametable.style.width = 400px;
- }
- functionCalCulateOffSetleft (campo) {
- returnCalCalEffSet (campo, offsetLeft);
- }
- FunctionCalCulateOffSettop (Field) {
- returnCalCalAffSet (campo, offsettop);
- }
- functionCalCulateOffSet (campo, attr) {
- varoffset = 0;
- while (campo) {
- offset+= campo [attr];
- campo = field.OffSetParent;
- }
- Returnfoffset;
- }
- functionPopulateName (celular) {
- // Llenar datos a la página web, celda ----> objeto TD
- inputfield.value = cell.firstchild.nodeValue;
- ClearNames ();
- }
- // Borrar la matriz de la lista
- functClearNames () {
- varind = nametableBody.childNodes.length;
- for (vari = ind-1; i> = 0; i-) {
- nametable.removechild (nametableBody.childNodes [i]);
- }
- completadoiv.style.border = none;
- }
- </script>
- <Evista>
- <metahttp-oquiv = content-typeContent = text/html; charset = gb2312/>
- <title> UntitledDocument </title>
- </ablo)
- <Body>
- <inputName = frmchangshangclass = inputTextId = frmchangShangStyle = width: 250px;
- onblur = disselect (); onKeyUp = findNames (); size = 50MaxLength = 100>
- <spanclass = style1> consejo: ingrese palabras clave y el programa lo coincidirá automáticamente desde la biblioteca
- Si el registro no está presente, llénelo usted mismo
- </span>
- <DivStyle = Position: Absolute; Top: 0; Izquierda: 0; ID = PopUp>
- <tableID = name_tableBgColor =#fffafaborder = 0CellSpacing = 0
- CellPadding = 0>
- <tbodyid = name_table_body> </tbody>
- </table>
- </div>
- </body>
- </html>
2. Backend Search.asp Página de datos de consultas asíncronas
Simplemente cambie la instrucción SQL y los campos que se mostrarán al formato correspondiente de su propia base de datos.
- <!-#includeVirtual = conn.asp->
- <%
- Palabra clave = request.QueryString (nombres)
- sql = selectlgid, lgmcFromgwherelgmclike '%& Keyword &%' OrderBylGidDesc
- setrs = server.createObject (ADODB.Recordset)
- Rs.opensql, Conn, 1,1
- Respuesta.contentType = text/xml
- Response.Write <? XmlVersion = 1.0Encoding = GB2312?>
- Respuesta.Write <Spuesta>
- dowhilenotrs.eof
- Response.Write <Centent>
- Response.Write <Name> & RS (LGMC) y </nombre>
- 'Response.Write <SerEDId> & RS (UserId) & </userId>
- 'Response.Write <StarTime> & RS (Startime) & </startime>
- 'Response.Write <Denttime> & rs (endtime) & </dtime>
- Response.write </tent content>
- Rs.Movenext
- bucle
- Response.Write </spuesta>
- rs.
- SETRS = nada
- %>
Lo anterior es el código para ASP para imitar el estilo de Google Sugerir para lograr el efecto de menú desplegable.