Cambiando el ancho de los widgets de autocompletar jquery-ui individualmente

Question

Estoy trabajando con widgets de autocompletar jquery-ui mutiples en una página y quiero poder establecer los anchos de cada uno individualmente. Actualmente, estoy haciendo de esta manera:

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

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 basados ​​en el orden en que se añaden al DOM.

Cuando se activa la autocompleta, parece crear un <ul> y luego colocarlo debajo del cuadro de entrada que lo activó. Lamentablemente, no puedo encontrar ningún identificador único en este generado <ul> para enganchar y aplicar algunos CSS.

Mi problema es diferente de this one, ya que estoy utilizando solo el autocompletado predeterminado, y no el combobox de autocompletar.

Además, no funciona tampoco la búsqueda en el autocompletado <ul> y la coincidencia de diferentes anchos de cuadro de autocompletar con los valores dentro de la lista, ya que los valores se generan dinámicamente.

¿Alguna idea?

Answer 1

Resolví este problema usando el evento 'abierto' disponible. Necesitaba una forma de establecer dinámicamente el ancho, junto con otros elementos y no quería marcas adicionales.

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

Answer 2

Puede ajustar el cuadro de entrada que desencadena el autocompletado en un div, otorgarle al div un ID específico y luego agregar el ul autocompletado a ese div en lugar de al cuerpo del documento. De esa manera puede apuntarlo con CSS basado en 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 3

Me gusta la respuesta de luqui. Pero si se encuentra en una situación en la que no puede usar la función appendTo (podría deberse a un desbordamiento oculto, etc.), puede usar el siguiente código para asegurarse de que está realizando 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

Answer 4

Si tiene varios controles que utilizan 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 
      }); 
     } 
    }); 
}); 

Ver Demo.

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

Answer 5

Puede obtener el widget "ui-menu" conectado al <input> que tiene 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 6

Me gustaría 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 también podría simplemente establecer el ancho en CSS

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

Answer 7

Una mejora en Martin Lögdberg answer. 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 8

lectura API, acabo de añadir una clase ui adelantado a div del padre de mi entrada, y que las obras multa.

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

Ver here:

[...] los padres del campo de entrada se comprobará para una clase de ui adelantado. Si se encuentra un elemento con la clase ui-front, se agregará el menú a ese elemento. Independientemente del valor, si no se encuentra el elemento , el menú se agregará al cuerpo.

El elemento adjunto determina la posición y el ancho del menú.

Answer 9

A partir de jQuery UI 1.10, el widget de autocompletar se reescribió utilizando el widget factory. Como parte de eso, la función autocompletar ahora contiene un punto de extensión _resizeMenu, que se invoca al dimensionar el menú antes de mostrar.

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

Answer 10

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

<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 rkever's answer, que no funcionó en mi caso). Sin embargo, min-widthno se sobrescribe, por lo que es útil.

También, 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 evitó que me cortes adicionales JS, espero que ayude!

Answer 11

Me las arreglé para resolver esto con CSS agregando float al menú de autocompletar.

.ui-autocomplete { float: left; }

Desde el menú de autocompletar se posiciona absolute y un hijo directo de la <body>. Supongo que obtiene su ancho máximo del cuerpo, y dado que es una posición absoluta, no se puede mostrar como un bloque en línea para evitar tomar todo el espacio disponible.

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