ejemplo - jquery autocomplete select event




jQuery UI Autocomplete Width no está configurado correctamente (12)

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í?


¡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
            }
        })

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>

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


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.


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.


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.


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.


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


Si te gusta usar CSS, prueba esto:

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

Funcionará en cada entrada de autocompletar.


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?


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.


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





jquery-ui-autocomplete