Crear autocompletar como Google usando jQuery

Estrada Web Group
Administrador
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í

Compartir artículo:

Más artículos geniales

Aprende a integrar pagos con PayPal en ASP.NET Core: Integrar el SDK de JavaScript de PayPal

Aprende a integrar pagos con PayPal en ASP.NET Core: Integrar el SDK de JavaScript de PayPal

En este artículo te enseñare a integrar el SDK de JavaScript de PayPal para utilizarlo en ASP.NET Core para recibir pagos en tu página web y te mostrare como incluir botones de PayPal en tu sitio web

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;