ejemplo - jQuery UI Autocomplete Width no está configurado correctamente

jquery autocomplete select

Question

Implementé un cuadro de Autocompletar jQuery UI, y en lugar de ser el ancho del cuadro de texto, las opciones desplegables se expanden para llenar el ancho restante de la página.

Eche un vistazo a este ejemplo para verlo usted mismo: http://jsbin.com/ojoxa4

Intenté establecer el ancho de la lista inmediatamente después de crearla, así:

$(''.ui-autocomplete:last'').css(''width'',
                               $(''#currentControlID'').width()
                              );

Esto parece no hacer nada.

También intenté establecer el ancho utilizando estilos en la página:

ui-autocomplete { width: 500px; }

Esto SÍ funciona, sorprendentemente, sin embargo, significa que todas las autocompletas en una página deberían tener el mismo ancho, lo que no es ideal.

¿Hay alguna forma de establecer el ancho de cada menú individualmente? O mejor, ¿alguien puede explicar por qué los anchos no funcionan correctamente para mí?

Answer 1

¡Establece el CSS en el evento abierto!

$(''#id'').autocomplete({
    minLength: 3,
    source: function(request, response) {
        $.ajax({
                    url: "myurl",
                    dataType: "json",
                    type: ''POST'',
                    data: {
                        ''q'': request.term,

                        ''maxRows'': 15
                    },
                    success: function(data) {

                        response($.map(data, function(item) {
                            return {
                                label: item.name,
                            }
                        })),
                    }
                })
            },
            select: function(event, ui) {
                $("#id").val(ui.item.label);
            },
            focus: function ( event, ui ){
                $form.find(''#id'').val(ui.item.label);
                return false;
            },
            open: function(){
                $(''.ui-autocomplete'').css(''width'', ''300px''); // HERE
            }
        })

Answer 2

Bueno, Ender. No sé si mi solución puede ayudarte o no, pero con Jqueryui remote-with-cache.html funcionó. Acabo de poner la propiedad de size en el cuadro de texto.

Por favor mira el código a continuación:

<div class="demo">
    <div class="ui-widget">
        <label for="birds">Birds: </label>
        <input id="birds" size="30"/>
    </div>
</div>

Answer 3

Busqué en el código de autocompletar y el culpable es este pequeño blighter

_resizeMenu: function() {
    var ul = this.menu.element;
    ul.outerWidth( Math.max(
        ul.width( "" ).outerWidth(),
        this.element.outerWidth()
    ) );
},

No estoy seguro de qué se supone que ul.width ("") está haciendo, pero ui.width (""). OutWidth () siempre devuelve el ancho del cuerpo porque a eso se anexa el ul. Por lo tanto, el ancho nunca se establece en el ancho de los elementos ....

De todas formas. Para solucionar, simplemente agrega esto a tu código

$element.data("autocomplete")._resizeMenu = function () {
        var ul = this.menu.element;
        ul.outerWidth(this.element.outerWidth());
}

¿Es esto un error?

EDITAR: en caso de que alguien quiera ver un caso de prueba reducido para el error, here está.

Answer 4

En caso de que no pueda establecer el ancho dinámicamente y no funcione nada intente incluir esto

http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.autocomplete.css?spec=svn3882&r=3882

ya sea en una hoja vinculada o codificada y establezca los parámetros aquí.

Me funcionó después de probar todo lo demás

Answer 5

Enfrenté el mismo problema y lo resolví usando este código, aunque es un poco de golpe y de prueba, pero funciona, no podía establecer el ancho, así que decidí establecer la propiedad de max-width .

  $(''.ui-autocomplete'').css(''margin-left'',''25%'') //center align
  $(''.ui-autocomplete'').css(''max-width'',''38%'') //hit and trial
  $(''.ui-autocomplete'').css(''min-width'',''38%'') //hit and trial

Vea lo que funciona mejor para usted. Espero que esto ayude.

Answer 6

Hay una opción de ancho para la autocompletar. Lo uso para 1.3.2.

$(''#mytextbox'').autocomplete(url, {  
        width: 280,
        selectFirst: false,
        matchSubset: false,
        minChars: 1,
        extraParams:{myextraparam:myextraparam},
        max: 100
    });

Answer 7

Mi solución fue agregar el autocompletar a un div con un id, y establecieron CSS para ese ul específico:

jQuery / JavaScript:

$("input[name=''search-text]").autocomplete({
    appendTo: "#item-search-autocomplete",
    source: ....
});

CSS:

#item-search-autocomplete .ui-autocomplete {
    width: 315px;
}

Funciona de maravilla.

Answer 8

Resulta que el problema es que el menú se está expandiendo para llenar el ancho de su elemento principal, que por defecto es el cuerpo. Esto se puede corregir dándole un elemento contenedor del ancho correcto.

Primero agregué un <div> así:

<div id="menu-container" style="position:absolute; width: 500px;"></div>

El posicionamiento absoluto me permite colocar el <div> inmediatamente después de la entrada sin interrumpir el flujo del documento.

Luego, cuando invoco el autocompletado, especifico un argumento appendTo en las opciones, haciendo que el menú se anexe a mi <div> y así herede su ancho:

$(''#myInput'').autocomplete({ source: {...}, appendTo: ''#menu-container''});

Esto soluciona el problema. Sin embargo, todavía estaría interesado en saber por qué es necesario, en lugar de que el complemento funcione correctamente.

Answer 9

Sé que esto ha sido respondido hace mucho tiempo, pero creo que hay una solución mejor

$(".autocomplete").autocomplete({
    ...
    open: function() {
        $("ul.ui-menu").width( $(this).innerWidth() );
        ...
    }
    ...
});

Funcionó bien para mí

Answer 10

Sé que esto ha sido respondido hace mucho tiempo, pero la forma más fácil que encuentro es usar la identificación del autocompletado, y para establecer el ancho a 100px llamarías

$(''.ui-autocomplete-input#MyId'').css(''width'', ''100px'');

después de que termine su $(''#MyId'').autocomplete(...); llamada. De esta forma, no terminas vinculando el orden de tus cuadros de texto autocompletados en tu DOM a tu script.

Answer 11

Sé que esto ha sido respondido hace mucho tiempo, pero me encontré con el mismo problema. Mi solución fue agregar posición: absoluta

Answer 12

Si está utilizando el autocompletado jQuery ui oficial (estoy en 1.8.16) y me gustaría definir el ancho manualmente, puede hacerlo.

Si está utilizando la versión minificada (si no, busque manualmente al hacer coincidir _resizeMenu), busque ...

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

... y reemplazarlo por (agrega this.options.width || before Math.max) ...

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

... ahora puede incluir un valor de ancho en la función .autocomplete ({ancho: 200}) y jQuery lo respetará. De lo contrario, se calculará de manera predeterminada.

Answer 13

Si te gusta usar CSS, prueba esto:

.ui-widget-content.ui-autocomplete{ width: 350px; }

Funcionará en cada entrada de autocompletar.

Answer 14

También me encontré con este problema, pero me di cuenta de que olvidé incluir una referencia a la hoja de estilo jquery.ui.autocomplete.css. ¿Incluyó esa hoja de estilo en su diseño / página maestra?

Answer 15

Tengo esto en mi archivo css, por lo que la autocompleta toma el width del span estilo:

 span input.ui-autocomplete-input {
     width: 100%;
 }

Answer 16

Yo uso esta solución de acceso directo

jQuery.ui.autocomplete.prototype._resizeMenu = function () {
  var ul = this.menu.element;
  ul.outerWidth(this.element.outerWidth());
}

Esa es básicamente la solución de @madcapnmckay , pero eso no necesita cambiar la fuente original.

Answer 17

$("#autocompleteID").autocomplete({
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)
{
   $("#autocompleteID").autocomplete ("widget").css("width","300px");  
} 
});