Più istanze di jQuery completamento automatico in un'unica pagina

Question

mi piacerebbe per lo stile ogni istanza di completamento automatico del plugin jQuery in modo diverso in ogni pagina. Solo che non riesco a capire come impostare gli stili per essere diverso per ogni istanza. Io non riesco ad avvolgere gli stili AC_ * all'interno di un div per identificarli dal CSS. Ogni cambiamento che faccio influisce sia. Tutte le idee?

Grazie.

Answer 1

Credo che troverete che il vostro problema è che il completamento automatico drop-in elenco non è collocato all'interno del segnaposto ... esempio:

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

Quando i risultati tornare, un nuovo div viene aggiunto alla pagina per visualizzare i risultati - ma non all'interno del vostro divisione "differentStyle". E 'appena viene aggiunto alla fine del DOM. Ad esempio:

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

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

La lettura della documentazione, direi che farà ignorando lo stile per due scatole di completamento automatico sulla stessa pagina impossibile:

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

Answer 2

Utilizzare l'opzione appendTo di inserire l'elenco di completamento automatico in qualche contenitore personalizzato al posto di body. Quindi è possibile lo stile di esso. Esempio:

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 3

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

aggiungere qualcosa di simile:

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

Answer 4

soluzione è molto semplice:

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

si può inserire qualsiasi codice alla classe .yourClass

Answer 5

Ho appena scoperto che si può facilmente afferrare il contenitore UL se si utilizza jQuery UI 1.8. Per afferrare il contenitore interfaccia utente in 1.8, è sufficiente aggiungere quanto segue al metodo aperto:

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

È possibile riscrivere il metodo _renderMenu. Prendere http://jqueryui.com/demos/autocomplete/#combobox come esempio.

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

Answer 7

era alla ricerca di qualcosa di diverso quando mi è capitato in questo post ... Sono riuscito a fare questo intrappolando i seguenti eventi di completamento automatico, e aggiungendo la mia classe in quella esterna che ospita l'uscita di completamento automatico. Quindi utilizzare i CSS per formattare gli elementi come necessario. Spero che questo aiuti qualcuno.

$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");
            },

Esempio css:

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

Sempre nell'ambito dei miei risultati JSON, ho semplicemente retropassaggio (dal mio JAVA AJAX azione) il guscio HTML con il risultato incorporato in esso come parte del reale "risultato" JSON. In questo modo posso creare elaborata HTML attorno ad ogni risultato, e quindi utilizzare il metodo di cui sopra per formattare loro il modo in cui voglio.

Answer 8

Nelle versioni più recenti "appendTo" è stato aggiunto, che consente di selezionare un elemento padre per dei suggerimenti. Si potrebbe creare diversi genitori (con una o classe) per le vostre liste.

Answer 9

Quando ho avuto questo problema ho scoperto, che jquery-ui dà ogni caso un ID univoco, che è # ui-id-1, # ui-id-2, in cui il primo completamento automatico nel DOM diventa numero 1, il secondo numero 2 e così via. Quindi, se l'ordine delle autocompletes è noto, diversi stili possono essere applicati alle diverse id.