Cambio de ancho de widgets de autocompletar jquery-ui individual

Question

Estoy trabajando con los widgets de autocompletar jquery-ui mutiple en una página y quiero ser capaz de establecer la anchura de cada uno de ellos individualmente. Actualmente, estoy haciendo de esta manera:

$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);

Lo que no es realmente una solución ya que el usuario es capaz de desencadenar diversas completa automáticamente en diferentes órdenes, y este código sólo estilos de ellos basado en el orden en que se añaden a la DOM.

Cuando se activa autocompletar, parece crear un <ul> y luego colocarla debajo de la caja de entrada que lo desencadenó. Por desgracia, no puedo encontrar ningún identificadores únicos en este <ul> generada a aferrarse a y aplicar un poco de CSS.

Mi problema es diferente de éste , ya que estoy usando sólo la función de autocompletar por defecto, y no el autocompletar-cuadro combinado.

Además, la excavación en el <ul> autocompletar y búsqueda de diferentes anchuras de la caja de autocompletar con los valores dentro de la lista no funciona bien, ya que los valores son generados dinámicamente.

¿Alguna idea?

Answer 1

Me resuelto este problema mediante el evento 'abierto' disponible. Que necesitaba una manera de establecer dinámicamente el ancho, junto con otros elementos y no quería marcado adicional.

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});

Answer 2

Me gusta la respuesta de Luqui. Pero si se encuentra en una situación donde no se puede utilizar la función de appendTo (podría ser debido al desbordamiento oculta etc.), se puede usar el siguiente código para asegurarse de que usted está haciendo cambios en la lista correcta.

$('#input').autocomplete({  
    source: mysource,  
    open: function() { 
        $('#input').autocomplete("widget").width(300) 
    }  
});

Ref: http://docs.jquery.com/UI/Autocomplete#method- widget de

Answer 3

Si tiene varios controles que el uso de autocompletar, una solución bastante elegante es para recuperar el widget adjunta al control en el último momento y modificar su CSS:

$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: source
    });
    $("input#Bar").autocomplete({
        source: source,
        open: function(event, ui) {
            $(this).autocomplete("widget").css({
                "width": 400
            });
        }
    });
});

Demostración .

Como se mencionó anteriormente, la anchura de autocompletar lista se calcula en el último momento, por lo tanto usted debe modificarlo en el open evento.

Answer 4

Se puede conseguir "ui-menú" Widget adjunta a la <input> tener autocompletar con respecto a $('#myinput').data("autocomplete").menu. Así que para cambiar el ancho puede utilizar

$('#myinput').autocomplete({
    source: yourUrlOrOtherSource,
    open: function () {
        $(this).data("autocomplete").menu.element.width(80);
    }
});

Answer 5

Se podría envolver la caja de entrada que está desencadenando la función de autocompletar en un div, dan la div un ID específico, y tiene que poner el auto ul completa a que se div en lugar de en el cuerpo del documento. De esa manera puede orientar con css basado en el div.

<!- this is how i would set up the div -->
<div class='autoSuggestWrapper' id='wrapper1'>
     <input class='autocomplete'>
</div>
<script>/* this is a way to config the autocomplete*/
   $( ".autocomplete" ).autocomplete({ appendTo: ".autoSuggestWrapper" });
</script> 

Answer 6

Sin utilizar código extra Javascript, puede utilizar la línea 1 CSS simple:

<style type="text/css">
    .ui-menu,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px !important}
</style>

Entonces, ¿por qué este trabajo con min-width

Simplemente porque width se sobreescribe por la JS, a veces incluso con soluciones que utilicen open: function(event, ui) { ... } (como de rkever respuesta, que hizo no funciona en mi caso). Sin embargo, min-width no es sobrescrito , por lo que viene muy bien.

Además, si lo hace no desea utilizar !important, puede detallarse más la regla con el resto de clases:

.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all,.ui-menu>.ui-menu-item,.ui-menu-item>a
 {min-width:800px}

Esto me evitó JS más hacks, espero que ayude!

Answer 7

I como respuesta @ Martin Lögdberg pero si usted está utilizando anchos de tamaño fijo en lugar de hacer algunas matemáticas lujo en los resultados devueltos para establecer el ancho, entonces usted podría también acaba de establecer el ancho de CSS

ul .ui-autocomplete {
  width: 50%;
}

Answer 8

Una mejora en la respuesta Martin Lögdberg. Este funcionado mejor para mí porque tenía muchos cuadros de texto en la página

$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});

Answer 9

Lectura API, acabo de añadir una clase ui-frontal a de los padres div de mi entrada , y que funciona bien.

<div class="ui-front">
    <label for="autosample" class="required">example</label>
    <input name="autosample" class="default-autocomplete" type="text">
</div>

aquí :

  

[...] los padres del campo de entrada serán comprobados para una clase de    ui-frontal . Si se encuentra un elemento con la clase de interfaz de usuario por adelantado, en el menú   se anexa a ese elemento . Independientemente del valor, si no hay   elemento se encuentra, el menú se añadirá al cuerpo.

El elemento adjunto determinar la posición y la anchura del menú.

Answer 10

A partir de jQuery UI 1.10, el widget de autocompletar se volvió a escribir usando el fábrica Reproductor . Como parte de esto, el autocompletar contiene ahora una href="http://api.jqueryui.com/autocomplete/#method-_resizeMenu" rel="nofollow"> _resizeMenu punto de extensión

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});

Answer 11

Me las arreglé para resolver esto con CSS mediante la adición de flotador para el menú de autocompletar.

.ui-autocomplete { float: left; }

Desde el menú de autocompletar es absolute posicionado y un hijo directo de la <body>. Supongo que consigue el mismo de la anchura máxima del cuerpo, y desde el mismo de la posición absoluta no se puede mostrar como inline-block para evitar tomar todo el espacio disponible.

También .ui-autocomplete { width: 1%; } parece trabajo.