Loading...

Autocompletar con ASP clásico y Jquery UI

Ez.Biz Cloudware
Blog de ASP Clásico

Autocompletar con ASP clásico y Jquery UI

Código ASP clásico

Por ASP clásico / 20/09/2014 @ 16:32:46 / 1452 visitas

 

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

 

Descubre más sobre cómo simplificar y optimizar tu trabajo empresarial en el Blog de CoreASP.

Descargo de Responsabilidad:

El contenido y los recursos que ofrecemos en CoreASP están destinados únicamente a proporcionar herramientas y ejemplos prácticos para el desarrollo en ASP Clásico. Esta información es de carácter general y no debe considerarse asesoramiento profesional o técnico específico para tu proyecto. Aunque hacemos todo lo posible por asegurar la calidad y precisión de los recursos compartidos, no garantizamos que sean completamente libres de errores o que se ajusten perfectamente a todas las situaciones. CoreASP no se responsabiliza por cualquier pérdida, daño o inconveniente derivado del uso directo o indirecto de los recursos o información proporcionada. Además, CoreASP no respalda ni asume responsabilidad por enlaces o contenido de terceros que puedan estar referenciados en nuestra plataforma. Todos los derechos de propiedad intelectual sobre el contenido y recursos publicados en CoreASP pertenecen a CoreASP o a sus respectivos propietarios, y su uso está sujeto a las condiciones de la licencia especificada para cada recurso. Nos reservamos el derecho de modificar este descargo de responsabilidad en cualquier momento sin previo aviso. Para más detalles, consulta el documento completo de términos y condiciones.