none
Cambiar tamaño Autocomplete Jquery RRS feed

  • Pregunta

  • Buenas noches, estoy tratando de cambiar el tamaño de la ventana que se despliega al escribir en una caja de texto; el autocomplete lo hago basándome en este codigo

    <script type="text/javascript">
        $(document).ready(function () {
            this.style.z-index=0;
            $("#<%=TxtNumero.ClientID %>").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("~/WebServAut.asmx/ObtListaReservas") %>',
                        data: "{ 'prefixText': '" + 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) {
                this.style.z-index=0;
                    $("#<%=Reserva.ClientID %>").val(i.item.val);
                },
                minLength: 1
            });
        }); 
    
    </script>

    sin embargo no logro aumentar el tamaño de la ventana que se despliega

    Necesito aumentar el tamaño de manera horizontal de la ventana desplegable. agradezco de antemano sus respuestas

    jueves, 5 de marzo de 2015 4:57

Todas las respuestas

  • O sea, ¿quiere aumentar el ancho?  ¿Cuál es el propósito?

    En todo caso, uno puede personalizar el HTML de los elementos del Autocomplete de jQuery UI.  Si personaliza el HTML de los elementos, seguramente podrá aplicarles estilo, y eso quiere decir que podrá modificar su tamaño, lo cual debería hacer que el contenedor de los elementos también altere su tamaño para acomodar el nuevo tamaño de los elementos. :-)


    Jose R. MCP
    Code Samples

    jueves, 5 de marzo de 2015 5:37
    Moderador
  • Buen día Jose, si, lo que busco es aumentar el ancho, el propósito se basa en que la información que se muestra es extensa y me gustaría que se viera en una sola linea. Lo que no he logrado  determinar es donde ajusto el ancho para ampliarlo, este autocompleter se basa en las librerías jquery y aun cuando he buscado dentro de ella, no lo detecto.

    Saludos

    jueves, 5 de marzo de 2015 12:16
  • Buenas.  ¿Revisó usted la documentación del enlace que le puse?  Ahí está el código de ejemplo.  Haga clic en "Viewsource", lo que revelará el JavaScript usado.  En la línea 65 del código está la asignación de la función _renderItem.  Aquí usted escribe una función que construya el HTML de cada elemento individual.  Aquí puede ajustar con CSS a gusto y placer.

    Jose R. MCP
    Code Samples


    jueves, 5 de marzo de 2015 13:48
    Moderador
  • Buenas noches, estoy tratando de cambiar el tamaño de la ventana que se despliega al escribir en una caja de texto; el autocomplete lo hago basándome en este codigo

    <script type="text/javascript">
        $(document).ready(function () {
            this.style.z-index=0;
            $("#<%=TxtNumero.ClientID %>").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("~/WebServAut.asmx/ObtListaReservas") %>',
                        data: "{ 'prefixText': '" + 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) {
                this.style.z-index=0;
                    $("#<%=Reserva.ClientID %>").val(i.item.val);
                },
                minLength: 1
            });
        }); 
    
    </script>

    sin embargo no logro aumentar el tamaño de la ventana que se despliega

    Necesito aumentar el tamaño de manera horizontal de la ventana desplegable. agradezco de antemano sus respuestas

    Si lo que necesitas es aumentar el tamaño de la caja, puedes hacer cambiando el estilo CSS. Al final la caja se pinta sobre un DIV generado de forma dinamica por jquery-ui.


    Elbrinner

    viernes, 13 de marzo de 2015 8:57