Existen ocasiones en que por distintos motivos, se deben brindar a los usuarios de un sistema elementos que permitan:

1-Hacer un uso mas enriquecedor

2-Ayudarlo a evitar errores

3-Una rápida utilización

Un elemento importante que ayuda en la concepción y alcance de los tres puntos anteriores es la función de autocompletar. Pero antes debo destacar que este es un requerimiento presente en la mayoría de proyectos que se realizan y si bien para algunos no parece útil, es una herramienta sencilla y potente.

 

Nuestro objetivo, entonces, será la realización de la función de autocomplete utilizando algo que la mayoría conoce:

1-Un textbox

2-Un Webservice

Así que entrando en materia, lo que buscamos es la posibilidad de desplegar una lista de resultados o sugerencias en un textbox mientras el usuario escribe en él, de manera que le sea mas sencillo encontrar o seleccionar un dato.

Empezemos con el código:

Nuestro primera paso será agregar un textbox a la página web, algo tan simple como:

 

<asp:TextBox ID="txtidentif" runat="server" />

 

Nuestro segundo paso, será agregar a nuestro proyecto el control AutoCompleteExtender, recordemos que este elemento es perteneciente al ajaxToolKit, y en caso de que no lo tengan deberán descargarlo de: http://www.asp.net/ajaxlibrary/download.ashx

Ahora sí, una vez descargado el toolkit, nos vamos al toolbox y agregamos los controles ajax seleccionando la DLL que viene en el paquete que descargamos.

Una vez listo esto, volvemos a nuestra página y agregamos el AutoCompleteExtender. A este control, debemos hacerle algunos pequeños cambios de manera que quedará así:

<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" enabled="True"
                                servicepath="~/WebServices/BuscarEmpleado.asmx" minimumprefixlength="1" servicemethod="ObtListaIdentificacion"
                                enablecaching="true" targetcontrolid="txtidentif" usecontextkey="True" completionsetcount="10"
                                completioninterval="0" >
                    </cc1:AutoCompleteExtender>

Explicaremos un poco la sintaxis:

ServicePath= Corresponde a la dirección donde se encuentra el webservice  (que veremos dentro de un momento)

MinimumPregixLength: Son la cantidad de caracteres que deben digitarse antes de iniciar la búsqueda y mostrar la lista.

ServiceMethod=Corresponde a la Función o Procedimiento del WebService que se encarga de consultar y mostrar los datos.

EnableCaChing=Para permitir el almacenamiento de datos en cache

TargetControlId=Es el Id del control al que se agregará el AutocompleteExtender y del cual se tomarán los datos para filtrar la lista.

 

Ahora, veamos la parte importante, nuestro WebService. Entonces, lo primero que debemos hacer es agregar al proyecto un nuevo elemento de tipo WebService, generalmente me gusta marcar la opción de colocar el código en forma separada, esto me da mas control y mayor orden, pero eso dependerá de cada quien y de su forma de trabajo.

En nuestro webservice, debemos agregar las referencias a las siguientes DLL

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data.SqlClient
Imports System.Data

 

Luego verificamos que la siguiente línea este habilitada, de lo contrario la habilitamos o la agregamos:

<System.Web.Script.Services.ScriptService()> _

Ahora, debemos crear las variables de conexión:

Private cnstring As String = ConfigurationManager.ConnectionStrings("LocalSqlServer").ConnectionString
    Dim con As New SqlConnection(cnstring)

Y por último debemos crear la función que realice la consulta a  la base de datos. Es importante tomar en cuenta que dicha función debe devolver algun elemento, por ejemplo una lista de datos. Es decir, debemos tener un Return

 

<WebMethod()> _
      <System.Web.Script.Services.ScriptMethod()> _
     Public Function ObtListaIdentificacion(ByVal prefixText As String, ByVal count As Integer) As String()

        Dim comando As New SqlCommand("select Top 30 nombres from nombre where identificacion  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("identificacion"))
        End While
        comando.Connection.Close()
        Return lista.ToArray
    End Function

Este procedimiento devuelve el TOP 30 de nombres que coinciden con lo que esta escribiendo en el textbox, como vemos este procedimiento es el que asignamos al AutoCompleteExtender, en la opción ServiceMethod

Finalmente, debemos realizar una pequeña modificación a nuestro webconfig, dentro de la etiqueta: <system.web>

debemos agregar lo siguiente:

<webServices>
      <protocols>
        <add name="HttpSoap"/>
        <add name="HttpPost"/>
        <add name="HttpGet"/>
        <add name="Documentation"/>
        <add name="HttpPostLocalhost"/>
      </protocols>
    </webServices>

 

Al finalizar totalmente nuestro webservice deberí lucir muy semejante a esto:

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data.SqlClient
Imports System.Data

' Para permitir que se llame a este servicio web desde un script, usando ASP.NET AJAX, quite la marca de comentario de la siguiente línea.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class BuscarEmpleado
    Inherits System.Web.Services.WebService

    Private cnstring As String = ConfigurationManager.ConnectionStrings("LocalSqlServer").ConnectionString
    Dim con As New SqlConnection(cnstring)

  
<WebMethod()> _
      <System.Web.Script.Services.ScriptMethod()> _
     Public Function ObtListaIdentificacion(ByVal prefixText As String, ByVal count As Integer) As String()

        Dim comando As New SqlCommand("select Top 30 nombres from nombre where identificacion  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("identificacion"))
        End While
        comando.Connection.Close()
        Return lista.ToArray
    End Function


End Class

 Y por supuesto, una imagen de como se vería