jquery ui autocompletar, preguntas css

Question

Me gustaría diseñar el <ul> que muestra los resultados de búsqueda. Sin embargo, tiene un estilo con css en línea generado a partir de la secuencia de comandos. ¿Qué debo hacer si, por ejemplo, quiero mover la lista un poco desde el cuadro de búsqueda?

Answer 1

Para crear su propio tema de JQueryUI Autocompletar, necesita volver a escribir estilos. Here is an example de todas las clases:

<input class="ui-autocomplete-input"/> 
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 1</a> 
    </li> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 2</a> 
    </li> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 3</a> 
    </li> 
</ul> 

Por lo tanto, el archivo CSS debe sobrescribir estilos para todas las clases que desea cambiar. Por ejemplo:

.ui-menu-item{ 
    color: blue; 
    font-weight: bold; 
} 

No se olvide de incluir su archivo CSS DESPUÉS archivo CSS jQueryUI para forzar el sobrescrito.

Answer 2

Esto no resuelve todo tu problema, pero es útil.

El módulo de autocompletar jQuery UI tiene un atributo position que puede ajustar con these settings.

Utilícelo junto con el estilo de CSS de las clases .ui-* y podrá lograr lo que desee.

Answer 3

¿Qué debo hacer si, por ejemplo, quiero mover un poco la lista del cuadro de búsqueda?

Agregue lo siguiente a su archivo .css.

.ui-autocomplete { 
    /* Move the autocomplete down a bit from the search box. */ 
    margin-top: 35px !important; 
    /* Remove the whitespace around the individual items. */ 
    padding: 0px; 
} 

Si desea cambiar el estilo de los elementos individuales a continuación, utilizar .ui-menu-item como se mencionó en la respuesta de Fran.

Si desea cambiar el estilo del elemento seleccionado o el elemento sobre la lista, debe agregar lo siguiente a su archivo .css.

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { 
    background-color: grey; 
    background-image: none; 
    padding: 0px; 
    margin: 0px; 
    border-radius: 0; 
} 

Answer 4

después de horas de búsqueda, me encontré con algo como esto:

caso

var ac = $("#tags").autocomplete({ 
    source: availableTags, 
    open: function (event, ui) { 
     $(".ui-menu").css("width", 300); 
    } 
}); 

abierto le da acceso a estos elementos que no existe antes: \