Есть ли способ динамически добавлять ajax элементы через jquery выбранный плагин?

Я пытаюсь использовать "Chosen" plugin путем сбора урожая (http://harvesthq.github.com/chosen/), и он работает для статического набора параметров, которые я передаю. Тем не менее, я хочу, чтобы всякий раз, когда кто-то вводит что-то, что не находится в предварительно заполненных опциях, оно должно отправить это серверу в качестве новой опции и при успешном ответе, я хочу не только добавить это в действительный список, но также и выберите его.

Перезагрузка параметров довольно проста:

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

Тем не менее, я не знаю, как сделать плагин "Избранный" в качестве значения. Я хотел бы сделать что-то вроде

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

или что-то подобное.

Любые предложения?

(ps: Я пытаюсь создать плагин "tagging" на основе выбранного. Итак, если введенный тег не существует, он добавит его на сервер и сразу же выберет.)

Ответ 1

Это полный набор изменений, которые я сделал с выбранным плагином (версия jquery) для решения этой проблемы.

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

this.new_term_to_be_added поддерживает введенную в настоящее время строку, которая не входит в число предопределенных опций.

Параметры .addNewElementCallback - это обратный вызов вызывающей функции, позволяющий им обрабатывать его (отправлять его на сервер и т.д.), и он должен быть синхронным. Ниже представлен скелет:

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

Новый элемент - элемент jquery - последний добавленный объект li для списка параметров.

Выполняя this.result_highlight = newElement; и this.result_select (evt); Я предлагаю Chosen плагин, чтобы выбрать это. Это работает независимо от того, является ли это одним или несколькими выборами. Решение Rifky будет работать только для одного выбора.

Ответ 2

Я только что делал это. Мне не понравилась линия Shreeni для настройки выбранного (без обид), поэтому я пошел с

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

который я лично считаю немного чище (тестируется с помощью блока multiselect, и он отлично работает)

Ответ 3

Создана вилка, содержащая нужную функцию здесь. Эта вилка называется вилкой koenpunt.

Вы можете ознакомиться с обсуждением этой функции на сайте garhq github.

Мое резюме о том, что произошло:

Многим людям нужна эта функция.
Несколько человек создали pull-запросы с предлагаемым решением.
Лучшее решение pull-request 166
Автор "избранных" решил, что не включит функцию
koenpunt (автор pull-request 166) создал вилку 'selected'
Люди начали отказываться от урожая "выбор" в пользу koenpunt fork

Ответ 4

Начиная с версии 1.0, некоторые из приведенных выше предложений больше не актуальны. Вот все, что нужно:

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

Параметры следующие:

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

Это означает, что если "Оранжевый" не находится в списке плодов, он просто попросит:

Нажмите "Enter", чтобы добавить: "Оранжевый"

Обратный вызов должен регистрировать новый термин любыми необходимыми средствами и возвращать идентификатор (или значение в контексте базового элемента выбора) для новой опции.

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

Ответ 5

в ответе ajax, попробуйте

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

Ответ 6

Я думаю, что это не лучшая практика, но этот код работает для меня. data return имеет тег html <option>

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

Ответ 7

Я делаю это просто так и отлично работает:

// 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");

Ответ 8

Вам не нужно много стресса, держите его простым. Вам нужно добавить ответ ajax в поле выбора html и затем выбрать выбранное.

Это будет выглядеть так.

код:

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

   });