C'è un modo per aggiungere ajax in modo dinamico elementi tramite plugin jquery scelto?

Question

Sto cercando di utilizzare il plug-in "Scelto" da harvest (http://harvesthq.github.com/chosen/) e funziona per il set statico di opzioni che sto passando. Tuttavia, quello che voglio è che ogni volta che qualcuno digita qualcosa che non è nelle opzioni pre-riempite, allora dovrebbe inviarlo al server come una nuova opzione e in caso di risposta positiva, voglio non solo aggiungerlo all'elenco valido di opzioni, ma anche selezionarlo.

Ricaricare le opzioni è abbastanza semplice:

// In ajax response 
var newOption = new Option("Text", __value__); 
$("#tagSelection").append(newOption); 
$("#tagSelection").trigger("liszt:updated"); 

Tuttavia, non so come fare plug-in "scelto" scegliere questo come il valore. Mi piacerebbe fare qualcosa come

$("#tagSelection").trigger("liszt:select:__value__"); 

o qualcosa di simile.

Qualche suggerimento?

(ps:.. Sto cercando di costruire un plugin "marcatura" sulla base di scelta in modo, se il tag viene digitato non esiste, si aggiungerà al server e quindi selezionarlo subito)

Answer 1

Questi sono i set completo di cambiamenti che ho fatto per il plugin scelto (versione jQuery) per risolvere questo problema

Chosen.prototype.choice_build = function(item) { 
    this.new_term_to_be_added = null; 
    // .... 
}; 

Chosen.prototype.no_results = function(terms) { 
    // .... 
    no_results_html.find("span").first().html(terms); 
    this.new_term_to_be_added = terms; 
    return this.search_results.append(no_results_html); 
}; 


Chosen.prototype.keydown_checker = function(evt) { 
     // ... 
     case 13: 
      if(this.new_term_to_be_added != null && this.options.addNewElementCallback != null) { 
       var newElement = this.options.addNewElementCallback(this.new_term_to_be_added); 


       if(newElement!=null && newElement.length == 1) { 
        // KEY TO SOLVING THIS PROBLEM 
        this.result_highlight = newElement; 
        // This will automatically trigger the change/select events also. 
        // Nothing more required. 
        this.result_select(evt); 
       } 
       this.new_term_to_be_added = null; 
      } 
      evt.preventDefault(); 
      break; 
      // ... 
}; 

il this.new_term_to_be_a dded mantiene la stringa attualmente digitata che non è tra le opzioni predefinite.

options.addNewElementCallback è il callback della funzione di chiamata per consentire loro di elaborarlo (inviarlo al server ecc.) E deve essere sincrono. Qui di seguito è lo scheletro:

var addTagCallback = function(tagText) { 
    var newElement = null; 
    $.ajax({url : that.actionUrl, 
     async : false, 
     dataType: "json", 
     data : { // ....}, 
     success : function(response) { 
     if(response) { 
          $('#tagSelection').append(
           $('<option></option>') 
             .val(data.Item.Id) 
             .html(data.Item.Value) 
             .attr("selected", "selected")); 
      $("#tagSelection").trigger("liszt:updated"); 
      // Get the element - will necessarily be the last element - so the following selector will work 
      newElement = $("#tagSelection_chzn li#tagSelection_chzn_o_" + ($("#tagSelection option").length - 1)); 
     } else { 
      // Handle Error 
     } 
    }}); 
    return newElement; 
}; 

Il newElement è un elemento jQuery - l'ultimo oggetto Li aggiunto alla lista di opzioni.

Effettuare this.result_highlight = newElement; e this.result_select (evt); Dico al plugin scelto di selezionare questo. Funziona sia che si tratti di una selezione singola o di una selezione multipla. La soluzione di Rifky funzionerà solo per selezione singola.

Answer 2

nella tua risposta ajax, provare

var newOption = new Option("Text", __value__); 
$("#tagSelection").append(newOption); 
**/* add this line */ 
$("#tagSelection").val(__value__);** 
$("#tagSelection").trigger("liszt:updated"); 

Answer 3

Ho appena fatto questo. Non mi piaceva la linea di Shreeni per l'impostazione selezionata (senza offesa) così sono andato con

$('#tagSelection').append(
    $('<option></option>') 
     .val(data.Item.Id) 
     .html(data.Item.Value) 
     .attr("selected", "selected")); 
$("#tagSelection").trigger("liszt:updated"); 

che personalmente credo sia un po 'più pulito (testato con la scatola di selezione multipla e funziona benissimo)

Answer 4

credo che la sua non è la migliore pratica ma questo codice funziona per me. ritorno di dati ha un tag html <option>

$.post("url.php",{data:data},function(data){ 
$('.choosen').empty().append(data); 
$(".choosen").trigger("liszt:updated"); 
}); 

Answer 5

Una forcella che contiene la funzione che si desidera è stata creata here. Questa forcella è indicata come la forcella koenpunt.

È possibile seguire attraverso la discussione di questa funzione sul sito harvesthq github

• https://github.com/harvesthq/chosen/pull/506
• https://github.com/harvesthq/chosen/pull/320
• https://github.com/harvesthq/chosen/pull/166

mio riassunto di quello che è successo:

1. Molte persone vogliono questa funzionalità
2. Alcune persone hanno creato pull-richieste con una proposta di soluzione
3. La soluzione migliore è pull-request 166
4. L'autore di 'scelta' ha deciso che non includerà la funzione
5. koenpunt (l'autore della richiesta di pull-166) ha creato un fork di 'scelta'
6. la gente ha iniziato abbandonando la versione harvesthq di 'scelta' a favore della koenpunt fork

Answer 6

Dalla versione 1.0 alcuni dei suggerimenti sopra riportati non sono più rilevanti. Ecco tutto quello che serve:

--- /home/lauri/Downloads/chosen_v1.0.0 (original)/chosen.jquery.js 
+++ /home/lauri/Downloads/chosen_v1.0.0 (modified)/chosen.jquery.js 
@@ -408,8 +408,18 @@ 
      break; 
     case 13: 
      evt.preventDefault(); 
-   if (this.results_showing) { 
+   if (this.results_showing && this.result_highlight) { 
      return this.result_select(evt); 
+   } 
+   var new_term_to_be_added = this.search_field.val(); 
+   if(new_term_to_be_added && this.options.add_term_callback != null) { 
+    var newTermID = this.options.add_term_callback(new_term_to_be_added); 
+    if(newTermID) { 
+    this.form_field_jq.append(
+     $('<option></option>').val(newTermID).html(new_term_to_be_added).attr("selected", "selected") 
+    ); 
+    this.form_field_jq.trigger("chosen:updated"); 
+    } 
      } 
      break; 
     case 27: 

Le opzioni sono le seguenti:

{add_term_callback: addTagCallback, no_results_text:'Press Enter to add:'} 

Ciò significa che se "Orange" non è nella lista dei frutti, sarebbe semplicemente chiederà:

Premere Invio per aggiungere: "Orange"

il callback dovrebbe registrare il nuovo termine b y qualunque sia il significato necessario e restituire l'ID (o il valore nel contesto dell'elemento select sottostante) per la nuova opzione.

var addTagCallback = function(tagText) { 
    // do some synchronous AJAX 
    return tagID; 
}; 

Answer 7

lo faccio semplicemente in questo modo e funziona perfettamente:

// this variable can be filled by an AJAX call or so 
var optionsArray = [ 
    {"id": 1, "name": "foo"}, 
    {"id": 2, "name": "bar"} 
]; 

var myOptions = "<option value></option>"; 
for(var i=0; i<optionsArray.length; i++){ 
    myOptions += '<option value="'+optionsArray[i].id+'">'+optionsArray[i].name+'</option>'; 
} 

// uses new "chosen" names instead of "liszt" 
$(".chosen-select").html(myOptions).chosen().trigger("chosen:updated"); 

Answer 8

Non c'è bisogno di molto stress, mantenerlo semplice. È necessario aggiungere la risposta ajax nella casella di selezione html e quindi aggiornare scelto.

Questa sarà simile ..

Codice:

var baseURL='Your Url'; 

$.ajax({ 

           type: "POST", 

           url: baseURL+"Your function", //enter path for ajax 

           data: "id="+id, //pass any details 

           success: function(response){ //get response in json_encode()formate 
                   
       var json_data = JSON.parse(response); 

                  var i=0; var append=''; 

                  if((json_data['catss_data'].length > 0)){ 

                      for(i=0;i < json_data['response_data'].length; i++){ 

                 append+="<option value='"+json_data['response_data'][i].category_name+"'>"+json_data['response_data'][i].category_name+"</option>"; 
                             // make response formate in option 

                        } 

                    $('#(selectbox-id)').html(append); // enter select box id and append data in it 

                     } 

                 } 

    $("#(selectbox-id)").trigger("chosen:updated"); // enter select box id and update chosen 

   });