Múltiples instancias de autocompletar de jQuery 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

creo que usted encontrará que su problema es que la función de autocompletar Drop-bajo lista no se coloca dentro de su marcador de posición ... ejemplo:

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

Cuando los resultados regresan, un nuevo div se agrega 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> 

lectura de la documentación, yo diría que va a hacer anular el estilo para dos cajas de autocompletar en la misma página imposible:

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

Answer 2

estaba buscando otra cosa cuando pasé por 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; } 

También como parte de los resultados de mi JSON, simplemente pasar de nuevo (de mi JAVA AJAX Acción) la cáscara HTML con el resultado incrustado en él como parte de la actual JSON "resultado". 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 3

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

añadir algo como esto:

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

Answer 4

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

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

Answer 5

Acabo de descubrir que puede agarrar fácilmente el contenedor UL si está utilizando jQuery UI 1.8. Para agarrar el contenedor de interfaz de usuario en 1.8, sólo tiene que añadir 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 6

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'); 
    } 
}); 

se puede poner cualquier código para la clase .yourClass

Answer 7

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 8

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

Answer 9

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.