Có cách nào để tự động thêm các phần tử thông qua plugin jquery đã chọn không?

Question

Tôi đang cố gắng sử dụng plugin "được chọn" bằng cách thu hoạch (http://harvesthq.github.com/chosen/) và nó hoạt động cho các tùy chọn tĩnh mà tôi đang chuyển. Tuy nhiên, điều tôi muốn là bất cứ khi nào ai đó gõ thứ gì đó không có trong các tùy chọn được điền sẵn, thì nó sẽ gửi cho máy chủ như một tùy chọn mới và phản hồi thành công, tôi không muốn thêm nó vào danh sách hợp lệ tùy chọn, nhưng cũng làm cho nó chọn nó.

Tải lại lựa chọn khá đơn giản:

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

Tuy nhiên, tôi không biết làm thế nào để làm cho "Chosen" plugin chọn này là giá trị. Tôi rất thích làm một cái gì đó như

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

hoặc một cái gì đó tương tự.

Mọi đề xuất?

(ps: Tôi đang cố xây dựng plugin "gắn thẻ" dựa trên lựa chọn. Vì vậy, nếu thẻ được nhập không tồn tại, nó sẽ thêm nó vào máy chủ và sau đó chọn nó ngay lập tức.)

Answer 1

đây là những bộ hoàn chỉnh các thay đổi mà tôi đã làm để các plugin chọn (jquery phiên bản) để giải quyết vấn đề này

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

các this.new_term_to_be_a dded duy trì chuỗi hiện đang được nhập mà không nằm trong số các tùy chọn được xác định trước.

Tùy chọn.addNewElementCallback là gọi lại đến chức năng gọi để cho phép họ xử lý nó (gửi nó đến máy chủ, v.v.) và nó phải đồng bộ. Bên dưới là bộ xương:

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

NewElement là phần tử jquery - đối tượng li mới nhất được thêm vào danh sách tùy chọn.

Bằng cách thực hiện điều này.result_highlight = newElement; và this.result_select (evt); Tôi nói với các plugin Chosen để chọn này. Điều này làm việc cho dù đó là một lựa chọn duy nhất hoặc đa lựa chọn. Giải pháp của Rifky sẽ chỉ hoạt động với một lựa chọn duy nhất.

Answer 2

để đáp ứng ajax của bạn, hãy thử

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

Answer 3

Tôi vừa mới thực hiện việc này. Tôi không thích dòng Shreeni của để cài đặt chọn (không có hành vi phạm tội) vì vậy tôi đã đi với

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

mà tôi cá nhân tôi nghĩ là một chút bụi (thử nghiệm với hộp multiselect và nó hoạt động tốt)

Answer 4

tôi nghĩ rằng nó không phải là phương pháp hay nhất nhưng mã này hoạt động cho tôi. dữ liệu trở lại có một thẻ html <option>

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

Answer 5

Một ngã ba có chứa các tính năng mà bạn muốn đã được tạo here. Cái nĩa này được gọi là ngã ba koenpunt.

Bạn có thể làm theo thông qua các cuộc thảo luận cho tính năng này trên trang web harvesthq github

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

tóm tắt của tôi về những gì đã xảy ra:

.210
1. Nhiều người muốn tính năng này
2. Một vài người đã tạo ra kéo yêu cầu với một giải pháp đề xuất
3. Giải pháp tốt nhất là pull-request 166
4. Tác giả của 'chọn' quyết định ông sẽ không bao gồm các tính năng
5. koenpunt (tác giả của pull-yêu cầu 166) đã tạo ra một ngã ba của 'chọn'
6. dân đã bắt đầu từ bỏ phiên bản harvesthq của 'chọn' có lợi cho koenpunt fork

Answer 6

Kể từ phiên bản 1.0, một số đề xuất ở trên không còn liên quan nữa. Dưới đây là tất cả những gì cần thiết:

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

Các tùy chọn như sau:

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

Điều này có nghĩa rằng nếu "Orange" không có trong danh sách các loại trái cây, nó chỉ đơn giản sẽ nhắc:

Nhấn Enter để thêm: "Orange"

Gọi lại phải đăng ký từ mới b y bất cứ điều gì có nghĩa là cần thiết và trả lại ID (hoặc giá trị trong bối cảnh của phần tử chọn cơ bản) cho tùy chọn mới.

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

Answer 7

tôi làm điều đó chỉ đơn giản là theo cách này và nó hoạt động hoàn hảo:

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

Bạn không cần phải căng thẳng hơn nhiều, giữ cho nó đơn giản. Bạn cần phải thêm phản hồi ajax của bạn vào hộp chọn html và sau đó cập nhật được chọn.

này sẽ trông giống như ..

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 

   });