Autocompletar con ASP clásico y Jquery UI

Código ASP clásico

 

En este artículo aprenderás a implementar un autocomplete con ASP clásico y Jquery UI. Sólo quería usar jQuery y jQuery UI con una página ASP que generará un archivo JSON que se utilizará para la lista de autocompletado. Como ustedes saben jQuery UI tiene un widget de autocompletado. En primer lugar, permítanme hacer una lista de cosas que tenemos que tener en cuenta:

1) tenemos que usar jQuery y jQuery UI;

2) vamos a crear una página ASP con el campo de texto que tendrá una función de autocompletado;

3) tenemos que crear otra página asp que desplegará la salida de la caja de texto de autocompletado. La salida será en formato JSON.

Autocomplete.asp Tenemos que crear una nueva página ASP y darle el nombre de “autocomplete.asp” Lo primero que tenemos que hacer es incluir jQuery y jQuery UI para el archivo. En nuestro ejemplo vamos a conectar con ajax.googleapis, facilitar las cosas. Incluya las siguientes líneas de código en la cabecera de la página de nueva creación:

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" ></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" ></script>
 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"/>

 Con la primera línea se incluyen la biblioteca jQuery. La segunda línea incluye jQuery UI. Y el tercero incluye el archivo css UI jQuery (estilo básico). En la cabecera de nuestra página autocomplete.asp, luego añadimos la función de autocompletado:

 

<script type="text/javascript" language="javascript">
 <!-- 
     $(function() {
         $( "#username" ).autocomplete({
             source: "source.asp",
             minLength: 2
     });
     });
 // -->
 </script>


Como puede ver, estamos utilizando la función de autocompletado de una manera muy básica (sin ajustar ninguna opción en particular). Nos estamos refiriendo a un cuadro de entrada con id = “username”, la fuente de la función de autocompletar será un archivo llamado “source.asp”, y la longitud mínima del valor buscado se establece en 2 (“el número mínimo de caracteres un usuario tiene que escribir antes de que la función de autocompletar activa “). Última parte! Tenemos que insertar el código para el cuadro de entrada en el cuerpo de nuestra página:

 

<input type="text" id="username">

Ahora tenemos que crear el origen de la lista de elementos de autocompletar. Porque el widget de autocompletado jQuery UI necesita tener una fuente en formato JSON, tenemos que recuperar los datos necesarios de una base de datos y alimentar al widget de manera con el formato correcto. (JSONLint es util para probar su salida de JSON) Ahora, veamos el código necesario para obtener los datos y debidamente formatearlo. Para que quede claro, JSON tiene una estructura sencilla, que se puede explicar como:

 

 [
 {"label1": "value1", "label2": "value2"},
 {"label1": "value3", "label2": "value4"}
 ]

Vayamos y veamos cómo construir la respuesta en formato correcto (souce.asp):

 

<%
'Lo primero que debe hacer es declarar algunas variables: 
Dim keywords
 Dim keywords_cmd
 Dim output 


'Luego preparamos el objeto de comando y obtenemos los datos:
Set keywords_cmd = Server.CreateObject ("ADODB.Command")
 keywords_cmd.ActiveConnection = your_connection_string
 keywords_cmd.CommandText = "SELECT id, name FROM dbo.users where name like '%"  & Request.QueryString("term") & "%'"
 keywords_cmd.Prepared = true
 
 Set keywords = keywords_cmd.Execute

'Se utiliza la variable llamada "salida" con el fin de dar formato a la información recuperada. 
output = "["
 
 While (NOT keywords.EOF) 
     output = output & "{""id"":""" & keywords.Fields.item("id") & """,""value"":""" & keywords.Fields.Item("name") & """},"
      keywords.MoveNext()
 Wend
 
 keywords.Close()
 Set keywords = Nothing
 
 output=Left(output,Len(output)-1)
 output = output & "]"
 response.write output
 
 %>

En la primera línea que empezar a llenar la variable de salida. A continuación, abrimos una región de repetición y añadimos valores recuperados de la base de datos. Al final de la región de repetición, cerramos el objeto de comando y la puso a la nada. Por fin nos quitamos la última coma en nuestra cadena y cerramos con “]”. Después de que la producción que la variable resultante (con Response.Write).Y eso es todo. Guarde el archivo como “source.asp” (en la misma carpeta donde está el archivo “autocomplete.asp” es), y autocomplete.asp abierto en tu navegador favorito.

Artículo traducido de http://thewebthought.blogspot.com/2011/08/asp-jquery-ui-autocomplete-with-json.html

 

tags: