¿Hay alguna manera de agregar elementos dinámicamente ajax a través del complemento jquery elegido?

Question

Estoy tratando de usar el complemento "Elegido" por recolección (http://harvesthq.github.com/chosen/) y funciona para el conjunto estático de opciones que estoy aprobando. Sin embargo, lo que quiero es que cada vez que alguien escriba algo que no está en las opciones precargadas, envíe el mensaje al servidor como una nueva opción y cuando tenga éxito, no solo quiera agregar eso a la lista válida de opciones, pero también lo hacen seleccionarlo.

volver a cargar las opciones es bastante simple:

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

Sin embargo, no sé cómo hacer plug-in "Elegido" pick esto como el valor. Me gustaría hacer algo como

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

o algo similar.

¿Alguna sugerencia?

(ps:.. Estoy tratando de construir un plug-in "etiquetado" basado en elegido lo tanto, si la etiqueta se escribe no existe, que se sumará al servidor y seleccione enseguida)

Answer 1

Estos son el conjunto completo de los cambios que hice para el plugin elegido (versión jQuery) para resolver este 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; 
      // ... 
}; 

el this.new_term_to_be_a dded mantiene la cadena actualmente tipada que no se encuentra entre las opciones predefinidas.

options.addNewElementCallback es la devolución de llamada a la función de llamada para permitirles procesarla (enviarla al servidor, etc.) y tiene que ser sincrónica. A continuación se muestra el esqueleto:

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

El newElement es un elemento jQuery - el último objeto li añadido a la lista de opciones.

Al hacerlo this.result_highlight = newElement; y this.ultit_select (evt); Le digo al complemento Chosen que seleccione esto. Esto funciona ya sea una selección única o una selección múltiple. La solución de Rifky solo funcionará para una selección única.

Answer 2

en su respuesta ajax, tratan

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

Answer 3

He estado haciendo esto. No me gusta la línea de Shreeni Para el ajuste seleccionado (sin ofender), así que fui con

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

que personalmente creo que está un poco más limpio (probado con la caja de selección múltiple y funciona bien)

Answer 4

Creo que es no es la mejor práctica, pero este código funciona para mí. retorno de datos tiene una etiqueta html <option>

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

Answer 5

Un tenedor que contiene la función que desea se ha creado here. Este tenedor se conoce como el tenedor koenpunt.

Se puede seguir a través de la discusión de esta característica en el sitio harvesthq github

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

Mi resumen de lo sucedido:

1. Mucha gente quiere esta característica
2. Algunas personas han creado pull-peticiones con una solución propuesta
3. La mejor solución es pull-request 166
4. El autor de 'elegidos' decidió que no incluirá la función
5. koenpunt (el autor de la solicitud de extracción 166) creó un tenedor de 'elegido'
6. gente ha comenzado a abandonar la versión harvesthq de 'elegidos' a favor de la koenpunt fork

Answer 6

Desde la versión 1.0, algunas de las sugerencias anteriores ya no son relevantes. Aquí es todo lo que se necesita:

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

Las opciones son las siguientes:

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

Esto significa que si "Naranja" no está en la lista de frutas, sino que simplemente sería indicador:

Pulse Intro para añadir: "Orange"

la devolución de llamada debe registrar el nuevo término b y lo que sea necesario y devuelva la ID (o valor en el contexto del elemento de selección subyacente) para la nueva opción.

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

Answer 7

lo hago simplemente esta manera y funciona perfectamente:

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

Usted no necesita mucha tensión, que sea sencillo. Debe agregar su respuesta de ajax en el cuadro de selección html y luego actualizar elegido.

Esto se verá como ..

Código:

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 

   });