Est-il un moyen dynamique d'ajax ajouter des éléments par le biais de jquery choisi plugin?

Ce sont l'ensemble des changements que j'ai fait pour le choisi du plugin (version jquery) afin de résoudre ce problème

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;
          //...
};

La ce.new_term_to_be_added maintient actuellement de type string qui n'est pas parmi les pré-défini les options.

Les options.addNewElementCallback est le rappel à la fonction d'appel pour leur permettre de la traiter (de l'envoyer au serveur etc.) et il doit être synchrone. Ci-dessous est le squelette:

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

La newElement est un élément jquery - la dernière ajouté li objet à la liste des options.

En faisant cela.result_highlight = newElement; et ce.result_select(evt); je dis à la Choisi le plugin pour la sélectionner. Cela fonctionne si c'est une sélection unique ou une multi-sélection. Rifky la solution fonctionne uniquement pour les sélectionner.

OriginalL'auteur Shreeni

Depuis la version 1.0 de certaines des suggestions ci-dessus ne sont pas pertinentes. Ici, c'est tout ce qui est nécessaire:

--- /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:

Les options sont les suivantes:

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

Cela signifie que si "Orange" n'est pas dans la liste des fruits, il serait tout simplement invite:

Appuyez sur Entrée pour ajouter: "Orange"

La fonction de rappel doit inscrire le nouveau terme par tous les moyens nécessaires et renvoie l'ID (ou de la valeur dans le contexte de la sous-élément select) pour la nouvelle option.

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

OriginalL'auteur LauriE

je pense que ce n'est pas la meilleure pratique, mais ce code fonctionne pour moi. le retour de données a une balise html<option>

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

OriginalL'auteur Basci Bsu

Vous n'avez pas besoin de beaucoup de stress , garder les choses simples. Vous devez ajouter votre ajax réponse dans la boîte de sélection de html et ensuite mettre à jour choisi.

Cela va ressembler..

Code:

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

   });   

OriginalL'auteur Niraj Pathak