Estoy tratando de cambiar el estilo de mi resultado de Autocompletar.
Lo intenté:
// Only change the inputs $('.ui-autocomplete-input').css('fontSize', '10px'); $('.ui-autocomplete-input').css('width','300px');Busqué y no pude encontrar cuál es la clase utilizada por el resultado, por lo que puedo cambiar su tamaño de fuente y tal vez su ancho.
Gracias.
Usando: jQuery-UI Autocompletar
EDITAR: necesito cambiar el css de mi resultado, que proviene de mi JSON, no de la entrada. El código que publicó, solo cambia la entrada, no el resultado. Es por eso que pedí la clase utilizada por la lista de resultados (al menos, creo que es una lista). Intenté usar fb de ff y no pude encontrarlo. Gracias de nuevo por su paciencia.
EDIT2: usaré el autocompletado de jQuery UI como ejemplo.
Marque esto para ver la página de autocompletar jQuery-UI
Después de escribir "Ja" en el cuadro de texto de la muestra de la página principal, Java y JavaScript aparecerán como Resultados, en el cuadro pequeño debajo del cuadro de texto.
Esta pequeña caja es de lo que quiero cambiar el CSS. Mi código en el ejemplo anterior solo cambia mi cuadro de texto CSS (que no necesito en absoluto).
No sé si estoy siendo claro ahora. Eso espero, pero si no, házmelo saber; Me esforzaré más si es necesario para mostrar mi problema.
La clase para la UL que contendrá los elementos de resultado es lo que necesito.
SOLUCIÓN Como dijo Zikes en su comentario sobre la respuesta aceptada, aquí está la solución. Solo necesita poner ul.ui-autocomplete.ui-menu{width:300px} en su archivo CSS.
Esto hará que todos los css del cuadro de resultados tengan width:300px (como la muestra).
Olvidé que el objeto de resultados no existe en la carga de la página y, por lo tanto, no se encontraría ni se dirigiría a una llamada a
$('...').css(). De hecho, deberá colocarul.ui-autocomplete.ui-menu{width:300px}en su archivo CSS, para que surta efecto cuando los resultados se generen y se inserten en la página.
– Zikes
Puede encontrar información sobre el estilo del widget Autocompletar aquí: http://docs.jquery.com/UI/Autocomplete#theming
HTML
<input type="text" id="auto">jQuery
$('#auto').autocomplete({'source': ['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz'] });CSS
ul.ui-autocomplete.ui-menu{width:400px} /* targets the first result's <a> element, remove the a at the end to target the li itself */ ul.ui-autocomplete.ui-menu li:first-child a{ color:blue; }Pude ajustar agregando este css al <head> del documento (arriba del javascript de autocompletar).
Algunos de los siguientes pueden ser más relevantes que otros. Puede hacerlo específico para la entrada de autocompletar si cambiar esto afecta a otros elementos que no desea que se vean afectados.
<style type="text/css"> /* http://docs.jquery.com/UI/Autocomplete#theming*/ .ui-autocomplete { position: absolute; cursor: default; background:#CCC } /* workarounds */ html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ .ui-menu { list-style:none; padding: 2px; margin: 0; display:block; float: left; } .ui-menu .ui-menu { margin-top: -3px; } .ui-menu .ui-menu-item { margin:0; padding: 0; zoom: 1; float: left; clear: left; width: 100%; } .ui-menu .ui-menu-item a { text-decoration:none; display:block; padding:.2em .4em; line-height:1.5; zoom:1; } .ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; } </style>Si está utilizando el autocompletado oficial de jQuery ui (estoy en 1.8.16) y desea definir el ancho manualmente, puede hacerlo.
Si está utilizando la versión minimizada (si no, busque manualmente haciendo coincidir _resizeMenu), busque...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}... y reemplácelo con (agregue this.options.width|| antes de 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({width:200}) y jQuery lo respetará. Si no, por defecto lo calculará.