TUTORIAL- AutoComplete Extender, Autocompletando desde la Base de datos

Si bien muchas veces hablamos de lo último que viene saliendo, también hay que darse un tiempo de hablar sobre lo que está y se utiliza poco, he visto a varios desarrolladores ASP.NET que no aprovechan este herramienta del Ajax Control Toolkit, de hecho fue por esto que me propuse la tarea de hacer un ScreenCast y un artículo que cada uno de los controles del Ajax Control Toolkit. Pero basta de hablar de mi, hablemos del Control AutoComplete.
Recuerda siempre que puedes ver los demos, y bajar la Suite en el sitio de ASP.NET
Cual es la Idea del Control
La idea es que puedas tener una funcionalidad muy similar a la que tienes en Google, que va completando con sugerencias, a medida que vas escribiendo en la caja de texto.
Nuestro Ejemplo, un buscador de películas
EL primer paso va a ser crear nuestra base de datos de Películas, voy a agregar unas 15 películas para tener datos, la estructura es la siguiente:
Nuestro segundo Paso va a ser la creación de la Interfaz de Usuario. (Los colores son simple casualidad)
Nuestro tercer paso , será crear el WebService que nos va a permitir obtener los datos para el autocompletar:
Luego, Cuarto Paso va a ser codificar nuestro WebService:
<WebMethod()> _
Public Function ObtListaPeliculas(ByVal prefixText As String, ByVal count As Integer) As String()
Dim con As New SqlConnection (ConfigurationManager.ConnectionStrings("EjemploConString").ConnectionString)
Dim comando As New SqlCommand("select PeliculaNombre from Peliculas where PeliculaNombre LIKE '%' + @param + '%' ", con)
comando.Parameters.AddWithValue("param", prefixText)
Dim dr As SqlDataReader
comando.Connection.Open()
dr = comando.ExecuteReader
Dim lista As New List(Of String)
While dr.Read
lista.Add(dr.Item("PeliculaNombre"))
End While
comando.Connection.Close()
Return lista.ToArray
End Function
Si bien el código no quedo muy ordenado en el post, veamos a grosso modo lo que realiza, los parámetros de entrada son obligatorios, y aunque no los estamos utilizando, como decíamos, deben ir. En el código hacemos una consulta con Like, para ver las coincidencias en cualquier parte del texto del campo PeliculaNombre, luego recorremos estas coincidencias y las vamos guardando en una lista de String, para luego retornarlas, según nuestro ejemplo (y como lo veras abajo) este webservice se va a ejecutar cuando escribamos 2 letras en el Textbox.
Nuestro Quinto Paso , será extender nuestro control TextBox , cabe recordar que yo ya tengo instalado en mi Visual Studio el Ajax Control Toolkit 3.5. Si no lo tienes, debes ir a la página
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/
En donde puedes ver una demo del control y además descargar la Suite.
Luego, como decíamos , extendemos el control, y seleccionamos la AutoCompleExtender
Esta acción nos va a generar el siguiente código declarativo, lo cual no es suficiente, deberemos configurar más opciones para que nuestro ejemplo funcione. También recuerda agregar un control ScripManager en tu página, es indispensable para que nuestro control funcione.
Código Generado:
<cc1:AutoCompleteExtender ID="tx_buscar_AutoCompleteExtender" runat="server" DelimiterCharacters="" Enabled="True" ServicePath="" TargetControlID="tx_buscar"> </cc1:AutoCompleteExtender>
Y lo que tenemos que configurar:
<cc1:AutoCompleteExtender ID="tx_buscar_AutoCompleteExtender" runat="server" enabled="True"
servicepath="BuscarPeliculas.asmx" minimumprefixlength="2" servicemethod="ObtListaPeliculas" enablecaching="true" targetcontrolid="tx_buscar" usecontextkey="True" completionsetcount="10" completioninterval="200" >
</cc1:AutoCompleteExtender>
Y Veamos los parámetros importantes:
-
servicepath : Corresponde al nombre del Webservice.
-
ServiceMethod : Corresponde al nombre del WebMethod del WebService
-
minimumprefixlength: corresponde a la cantidad mínima de caracteres antes de que se llame al WebService, esto es importante, ya que si dejas la cantidad mínima para un gran conjunto de datos, por la naturaleza del filtro, puede que tu consulta se demore un buen resto antes de entregar los datos.
-
targetcontrolid: Corresponde al control textbox en el que se va a ingresar el texto.
-
CompletionSetCount: Corresponde a la cantidad de resultados que quieres que se muestren en el autocomplete.
-
CompletionInterval : Corresponde a la cantidad de milisegundos antes de que se muestre la lista.
Para ver más detalles puedes ir a:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx
Sexto Paso: Ahora a probarlo!
Al escribir Los por la naturaleza de la Query (La sentencia Like que va a buscar la coincidencia de la cadena de texto en cualquier parte del campo a consultar) vamos a obtener:
Ahora veámoslo en Acción, con un Video :)
DESCARGA TODO EL EJEMPLO ACA
Espero que te sirva, cualquier duda o comentario, no dudes en consultar :)
Saludos y Feliz Año nuevo 2010!
Gonzalo