event - jquery autocomplete focus

Múltiples instancias de jQuery autocompletar en una página

Question

Me gustaría diseñar cada instancia del complemento de autocompletar de jQuery de manera diferente en cada página. Excepto que no puedo imaginar cómo configurar los estilos para que sean diferentes para cada instancia. Parece que no puedo ajustar los estilos ac_ * dentro de un div para identificarlos desde el CSS. Cada cambio que hago afecta a ambos. ¿Algunas ideas?

Gracias.

Answer 1

la solución es muy fácil:

$( "#target-input" ).autocomplete({
    open:function( event, ui ) {
      $(''.ui-autocomplete.ui-menu'').addClass(''yourClass'');
    },
    close:function( event, ui ) {
      $(''.ui-autocomplete.ui-menu'').removeClass(''yourClass'');
    }
});

puedes poner cualquier código en la clase .yourClass

Answer 2

Creo que descubrirá que su problema es que la lista de autocompletar no se encuentra dentro de su marcador de posición ... ejemplo:

<div class="differentStyle">
    <input type="text" class="autocomplete">
</div>

Cuando los resultados vuelven, se agrega un nuevo div a la página para mostrar los resultados, pero no dentro de la división "differentStyle". Simplemente se agrega al final del DOM. Por ejemplo:

<div class="differentStyle">
    <input type="text" class="autocomplete">
</div>

...
<div class="ac_results">I get added by jQuery Autocomplete!</div>
</body>

Al leer la documentación, diría que hará imposible el estilo de dos cajas de autocompletar en la misma página:

http://docs.jquery.com/Plugins/Autocomplete

Answer 3

Estaba buscando otra cosa cuando crucé esta publicación ... Logré hacer esto atrapando los siguientes eventos de autocompletar, y agregando mi propia clase en el exterior que alberga el resultado de autocompletar. Luego use CSS para formatear los elementos según sea necesario. Espero que esto ayude a alguien.

$input.autocomplete({
            focus : function(event, ui) {
              $(".forms-search-result").parents("ul").addClass("myClass");
              return false;
            },
            open : function(event, ui) {
              $(".forms-search-result").parents("ul").addClass("myClass");
            },

Ejemplo css:

.myClass a.ui-corner-all { font-weight:bold; }

Además, como parte de mis resultados JSON, simplemente paso (desde mi JAVA AJAX Action) el shell HTML con el resultado incrustado en él como parte del "resultado" real de JSON. De esa manera puedo crear HTML elaborado alrededor de cada resultado, y luego usar el método anterior para formatearlos de la manera que quiero.

Answer 4

Acabo de descubrir que puede agarrar fácilmente el contenedor UL si está utilizando jQuery UI 1.8. Para tomar el contenedor de UI en 1.8, simplemente agregue lo siguiente a su método abierto:

var $myAcInput = $("#my-acomplete-input");

...
$myAcInput.autocomplete({
  open : function(event, ui) {
    // Grab the widget that just opened:
    var $resultsContainer = $formsInput.autocomplete("widget");
    // Add a custom rendering class and use tht to style your subelements
    $resultsContainer.addClass("my-custom-results-container-class");              
    // Position the container wherever you want:
    $resultsContainer.position({at: "center bottom", 
                                my:"center top", 
                                collision: "fit", 
                                of: "#my-acomplete-input"});            
  }
  source :  etc etc etc
});

Answer 5

Puede volver a escribir el método _renderMenu . Tome http://jqueryui.com/demos/autocomplete/#combobox como un ejemplo.

selector.data("autocomplete")._renderMenu=function(ul, items){
//do something here..
}

Answer 6

Use la opción appendTo para colocar la lista de autocompletar en algún contenedor personalizado en lugar de body . Entonces puedes darle estilo. Ejemplo:

JS:

$(''#suggestions'').autocomplete({source: get_suggestions, appendTo: ''#my-suggestions''})

HTML:

<input type="text" id="suggestions">
<div id="my-suggestions"></div>

CSS:

#my-suggestions {
  position: absolute;
}

#my-suggestions .ui-autocomplete {
   foo: bar;
}

Answer 7

En las versiones más nuevas, se agregó "appendTo", lo que le permite seleccionar un elemento principal para la lista de sugerencias. Puede crear diferentes padres (con un en o clase) para sus listas.

Answer 8

Cuando tuve este problema descubrí que jquery-ui le da a cada instancia una identificación única, que es # ui-id-1, # ui-id-2, donde la primera autocompleta en el dom obtiene el número 1, el segundo número 2 y así sucesivamente. Entonces, si se conoce el orden de las autocompletas, se pueden aplicar diferentes estilos a las diferentes identificaciones.

Answer 9

http://api.jqueryui.com/autocomplete/#method-widget

agregue algo como esto:

selector.autocomplete( "widget" ).addClass(''yourclass'');