<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<title>Página sin título</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
SearchText();
});
function SearchText() {
$(".auto").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/GetAutoCompleteData",
data: "{'FirstName':'" + document.getElementById('FirstName').value + "'}",
dataType: "json",
success: function(data) {
response(data.d);
},
error: function(result) {
alert("Error Occurred");
}
});
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<div class="ui-widget">
<label for="tbAuto">Ingrese un nombre: </label>
<input type="text" id="FirstName" class="auto" />
</div></div>
</form>
</body>
</html>Mas o menos se vera asi:
Otra cosa que necesitamos saber es la funcion script en la seccion header.
$(".auto").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/GetAutoCompleteData",
data: "{'FirstName':'" + document.getElementById('FirstName').value + "'}",
dataType: "json",
success: function(data) {
response(data.d);
},
error: function(result) {
alert("Error Occurred");
}
});
}
});Esta declaracion de la funcion de formato JSON que estamos usando es para llamar a los metodos web usando JQuery $.ajax() cuando queramos llamar a Ajax con JQuery usaremos funciones JSON con el formato de arriba.Los atributos ContentType y dataType son los mismos para todas las funciones solo url, data y success function variaran basadas en nuestra peticion.
url: Esta es la ruta para nuestros metodos Web
data: Pasaremos parametros utilizando este parametro sino pasamos ninguno entonces en data pondremos: "{}".
Hay un detalle JSON es sensible a mayusculas asi que sean cuidadosis antes de escribir el formato de data JSON.
Ahora abran la hoja de codigo y agreguen los siguientes namespaces:
using System.Collections.Generic; using System.Data.SqlClient; using System.Web.Services;Luego agregan el siguiente codigo en C#
[WebMethod]
public static List GetAutoCompleteData(string FirstName)
{
List result = new List();
using (SqlConnection con = new SqlConnection("Data Source=XSaint;Integrated Security=true;Initial Catalog=AdventureWorks"))
{
using (SqlCommand cmd = new SqlCommand("select distinct FirstName from Person.Contact where FirstName LIKE '%'+@FirstName+'%'", con))
{
con.Open();
cmd.Parameters.AddWithValue("@FirstName", FirstName);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
result.Add(dr["FirstName"].ToString());
}
return result;
}
}
} Luego presionen F5 y el resultado sera asi:
Muy buen POST. Bien redactado, con coherencia, con todo lo necesario. Que hay otros que te pasas más tiempo intentando arreglarlo que si empiezas de CERO. Buenisimo.
ResponderEliminarMUCHAS GRACIAS POR COMPARTIRLO.
Ahora me falta una cosa que no consigo, yo cuando autocompleto necesito mandar a un campo oculto el ID de la base de datos que equivale al valor que hemos elegido de la vista, sigo peleando con ello. Te agradecería si supieras como hacerlo. Que llevo ya 2 semanas peleando.
ResponderEliminarGRACIAS
gracias x tu comentario voy a revisar lo que me dices y si me sale creare un nuevo hilo con lo que me dices pero lo que se me ocurre ahorita es porque no lo intentas crear un label que no sea visible y en el textboxchanged haces una consulta que sea a la inversa de lo que puse arriba que retorne el ID donde el valor sea el texto del textbox y lo muestre en el label
ResponderEliminarPues mira en eso no había pensado, me estaba obsesionando con querer sacar sacar el ID directamente cuando selecciono un nombre. Probaré con eso aunque también intentaré conseguir lo qeu busco. Si encuentro solución ya te aviso.
ResponderEliminarNo hay de que un placer apoyar a gente que hace buenas cosas ayer, te promocione un poco por twitter también, aunque seguro que no lo necesitas mucho porque tienes un muy buen sitio.
hola gracias x tu respuesta voy a tratar de hacer un codigo similar a lo que me pides el sabado, gracias x promocionarme xq no recibo muchas visitas jejej pero tu comentario me puso de animo da gusto que te haya servido y si puedes apoyarme linkeandome en tu pagina o con trafico te agradeceria pero de antemano gracias x venir a mi blog el sabado escribire un post con lo q me pides y espero te ayude nos vemos =)
ResponderEliminarMuy bien no tengo problema ni en esperar ni en promocionarte. Trabajo en una pequeña empresita de informática, que estamos empezando y siempre es bueno establecer contactos. No dudes que promocionaremos tu sitio. La web (que es provisional jeje), es www.mamsor.com . Por si te interesa algo de lo que puedas ver jeje. Hasta pronto.
ResponderEliminarSi quieres puedes ponerte en contanto conmigo en empiezalarevolu@gmail.com Y nos mandas si quieres un icono o Banner y te colocamos en webs relacionadas
ok esta bien te escribire a tu correo y un gusto conocerte amigo te estare escribiendo estos dias el problema que no tengo mucho tiempo por temas de trabajo y ya no posteo mucho a la pagina como quisiera pero me comunicare contigo a tu correo nos vemos =) que le vaya bien
ResponderEliminarsale error en el List() estoy usando visual studio 2013 y framework 4.5.... miltachi@hotmail.com
ResponderEliminar