Está en la página 1de 8

DISTINTAS FORMAS DE AUTOCOMPLETAR EN ASP.

NET

AJAX: POR WEBSERVICE.


En presentacion click derecho- Agregar nuevo elemento- webservice o servicio web

Anexo el siguiente codigo:


using Entidades; using Reglas; using System.Data;

SI LA SIGUIENTE LINEA ESTA COMO COMENTARIO QUITO EL COMENTARIO PARA PODER FUNCIONAR
[System.Web.Script.Services.ScriptService] [WebMethod] public string[] obtenerCedula(string prefixText, int count) { List<string> items = new List<string>(count);

DataSet ds = new DataSet(); oEP.Id = prefixText; ds = oRP.ConsultarCompletar(oEP);

foreach (DataRow dr in ds.Tables[0].Rows) { items.Add(dr["Primer_Nombre"].ToString()); } return items.ToArray(); }

// esto en el webservice

EN EL WEBFORM LE AGREGO EL EXTENSOR DE AUTOCOMPLETAR AL TEXTBOX QUE CUMPLIRA ESTA FUNCION

TAMBIEN AGREGO EL TOOLKITSCRIPTMANAGER

EN EL CODIGO DEL CONTROL DE AJAX AGREGO LO SIGUIENTE


<ajaxToolkit:AutoCompleteExtender ID="txtbuscar_AutoCompleteExtender" runat="server" DelimiterCharacters="" Enabled="True" ServicePath="WebService1.asmx" ServiceMethod="obtenerCedula" MinimumPrefixLength="1" CompletionSetCount="12" TargetControlID="txtbuscar"> </ajaxToolkit:AutoCompleteExtender>

EN EL TEXTBOX COLOCAR AUTOPOSTBACK=TRUE PARA QUE EL NOMBRE DEL AUTOCOMPLETAR QUE SE SELECCIONA INMEDIATAMENTE SI ES EL CASO PONGA LOS DATOS EN EL GRIDVIEW

POR WEBFORM
EN LA CLASE DEL WEBFORM CREO EL WEBMETHOD E IMPORTO LAS SIGUIENTES LIBRERIAS
using Entidades; using Reglas; using System.Data; using System.Web.Services; using System.Web.Script.Services; [WebMethod] [ScriptMethod] public static string[] GetCustomerList(string prefixText, int count) { cEClientes oEP = new cEClientes(); cR_Cliente oRP = new cR_Cliente(); List<string> list = new List<string>(count); ; //DataTable ds = new DataTable(); DataSet ds = new DataSet(); oEP.Id = prefixText; ds = oRP.ConsultarCompletar(oEP);

foreach (DataRow dr in ds.Tables[0].Rows) { list.Add(dr["Primer_Nombre"].ToString()); } return list.ToArray(); }

EN EL WEBFORM LE AGREGO EL EXTENSOR DE AUTOCOMPLETAR AL TEXTBOX QUE CUMPLIRA ESTA FUNCION

EN EL CODIGO DEL CONTROL DE AJAX AGREGO LO SIGUIENTE


<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </ajaxToolkit:ToolkitScriptManager> <asp:TextBox ID="txtCustomer" runat="server"></asp:TextBox> <ajaxToolkit:AutoCompleteExtender ID="txtCustomer_AutoCompleteExtender" runat="server" DelimiterCharacters="" Enabled="True" TargetControlID="txtCustomer" ServiceMethod="GetCustomerList" ServicePath="wfPruebaAjax.aspx" MinimumPrefixLength="2" CompletionInterval="1000" EnableCaching="true" CompletionSetCount="12"/> </ajaxToolkit:AutoCompleteExtender>

TAMBIEN AGREGO EL TOOLKITSCRIPTMANAGER

EN EL TEXTBOX COLOCAR AUTOPOSTBACK=TRUE PARA QUE EL NOMBRE DEL AUTOCOMPLETAR QUE SE SELECCIONA INMEDIATAMENTE SI ES EL CASO PONGA LOS DATOS EN EL GRIDVIEW

JQUERY POR WEBSERVICE:


ESTA ES LA FORMA MAS FACIL DE HACERLO POR MEDIO DE JQUERY En presentacion click derecho- Agregar nuevo elemento- webservice o servicio web

Anexo el siguiente codigo:


using System.Web.Script.Services; using Entidades; using Reglas; using System.Data;

SI LA SIGUIENTE LINEA ESTA COMO COMENTARIO QUITO EL COMENTARIO PARA PODER FUNCIONAR
[System.Web.Script.Services.ScriptService]

[WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public string[] GetCustomers(string prefix) { List<string> customers = new List<string>(); cEClientes oEP = new cEClientes(); cR_Cliente oRP = new cR_Cliente(); List<string> list = new List<string>(); ; //DataTable ds = new DataTable(); DataSet ds = new DataSet(); oEP.Id = prefix; ds = oRP.ConsultarCompletar(oEP);

foreach (DataRow dr in ds.Tables[0].Rows) { list.Add(dr["Primer_Nombre"].ToString()); } return list.ToArray(); } }

EN EL WEBFORM INSERTO LAS SIGUIENTES REFERENCIAS


<script src="js/jquery-1.8.2.js" type="text/javascript"></script> <script src="jsmodal/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script> <link href="jsmodal/estilo/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />

Y COLOCO EL SIGUIENTE CODIGO


<script type="text/javascript"> $(document).ready(function () { $("#<%=txtSearch.ClientID %>").autocomplete({ source: function (request, response) { $.ajax({ url: '<%=ResolveUrl("~/servicePruebajquery2.asmx/GetCustomers") %>', data: "{ 'prefix': '" + request.term + "'}", dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", success: function (data) { response($.map(data.d, function (item) { return { label: item.split('-')[0], val: item.split('-')[1] } })) }, error: function (response) { alert(response.responseText); }, failure: function (response) { alert(response.responseText); } }); }, select: function (e, i) { $("#<%=hfCustomerId.ClientID %>").val(i.item.val); }, minLength: 1

}); }); </script>

PARA FUNCIONAR CON LOS ESTILOS DE JQUERYUI INSERTO UN HIDDENFIELD EN MI WEBFORM