Crear autocompletar como Google usando jQuery

jquery ajax, autocomplete asp.net

En este artículo se explica cómo crear un autocomplete usando jQuery con ASP.NET.

Seguro en algún sitio web que ha visitado se encontró con esta funcionalidad, cuando comienza a escribir en un cuadro de texto se muestra una lista de posibles palabras que desea escribir y le permite seleccionar la palabra de esta serie de opciones disponibles. El mejor ejemplo es el del buscador de Google o el buscador de Facebook.

Este artículo le ayudará a crear la funcionalidad de autocompletar que es similar a las funcionalidades de Google.

Veamos el procedimiento necesario para la creación de este tipo de aplicación. En seguida está el código fuente para este ejemplo y al final del ejemplo esta la liga de descarga del ejemplo.

HTML

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Autocompletar_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Autocompletar  con jQuery</title>
    <link href="css/jquery-ui.css" rel="stylesheet" />
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script type="text/javascript">
        function LoadList()
        {        
            var ac=null;
            ac = <%=listFilter %>;
            $( "#Country" ).autocomplete({
                source: ac
            });
        }
    </script>
</head>
<body  onload="LoadList()">
    <form id="form1" runat="server">
        <div>
            <h2>Autocompletar</h2>
            <div class="auto-complete">
                <label for="tags">
                    Captura el nombre del país:
                </label>
                <input id="Country" />
            </div>
        </div>
    </form>
</body>
</html>

VB.NET

Partial Class Autocompletar_Default
    Inherits System.Web.UI.Page
    Public listFilter As String = ""
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        listFilter = ""
        listFilter = GetPaises()
    End Sub
    Function GetPaises() As String
        Dim strPaises() As String = {"México", "España", "Brazil", "Italia", "Estados Unidos", "Canada", "Peru", "Argentina", "Alemania", "India", "Uruguay", "Chile"}
        Dim output As New StringBuilder()
        output.Append("[")
        For i = 0 To strPaises.Length - 1
            output.Append("""" + strPaises(i) + """")
            If i <> (strPaises.Length - 1) Then
                output.Append(",")
            End If
        Next
        output.Append("];")
        Return output.ToString()
    End Function
End Class

Descargar ejemplo aquí