Autocomplete JQuery + ASP.Net

La forma en que se va a implementar este ejercicio consta de un textbox que se autocompleta gracias al autocomplete de JQuery, Los datos van a ser suministrados del lado del servidor esto puede cambiar para suministrar la información desde un repositorio de base de datos.
  1. Realizar la referencia a jquery
  2. Realizar referencias a jquery-ui
  3. Insertar el código jquery
  4. Insertar en la pagina ASPx un text box con ID=”txciudades”.
  5. Insertar el código del code behind
 El siguiente es el código Fuente:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Autocomplete.aspx.cs" Inherits="Autocomplete" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <link href="Scripts/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>   
    <script type="text/javascript">
        $(document).ready(function () {
           
            $.ajax({
                type: "POST",
                url: "Autocomplete.aspx/AutocompleteMethod",
                dataType: "json",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    if (data.d) {
                        alert(data.d);
                        var datafromServer = data.d.split(":");
                        $('#<%= txciudades.ClientID %>').autocomplete({
                            source: datafromServer
                        });                       
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
           
        });
    </script>
    <style type="text/css">
        .Green
        {
              color : Green;
              font-size :xx-large; 
        }
    </style>
    <title>Autocomplete with Jquery + ASP.Net</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <hr />
        <center>
        <asp:Label Text="Digite ciudades: " runat="server" CssClass="Green" />
        <asp:TextBox ID="txciudades" runat="server" CssClass="Green" />
        </center>
        <hr />
    </div>
    </form>
</body>
</html>

using System;
using System.Web.Services;

public partial class Autocomplete : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod]
    public static string AutocompleteMethod()
    {
        String Ciudades = "Bogota:Medellin:Cali:Pereira:Manizales:Barranquilla:Cartagena:Santa Marta:Girardot:Armenia:Restrepo:Arboleda:Belen:Cartago:Duitama:Florencia:Granada:Honda:Indiana:Jerico:Laureles:Neira:Paipa:Quimbaya:Restrepo:Filadelfia:Manzanares:Supia:Uraba:Zipaquira";

        // aqui se puede devolver una lista de una Base de Datos por ejemplo
        // Se tambien puede devolver un ObjetoJson con la informacion

        return Ciudades;
    }
}

Anuncios