有没有办法通过jquery选择的插件动态ajax添加元素？

Question

我试图通过收获(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:我正在尝试根据选择构建一个"标记"插件.因此,如果键入的标签不存在,它会将其添加到服务器,然后立即选择它.)

Answer 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维护当前键入的字符串,该字符串不在预定义的选项中.

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

newElement是一个jquery元素 - 最新添加的li对象列表中的选项.

通过这样做.result_highlight = newElement; 和this.result_select(evt); 我告诉Chosen插件选择这个.无论是单选还是多选,这都有效.Rifky的解决方案仅适用于单选.

Answer 2

我刚刚这样做了.我不喜欢Shreeni的选线(没有进攻),所以我去了

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

我个人认为有点清洁(用多选框测试,它工作正常)

Answer 3

在此处创建了包含所需功能的分支.这个fork被称为koenpunt fork.

您可以在harvesthq github网站上完成此功能的讨论

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

我对发生的事情的总结:

1. 很多人都想要这个功能
2. 一些人用建议的解决方案创建了拉取请求
3. 最佳解决方案是pull-request 166
4. "被选中"的作者决定不包括该功能
5. koenpunt(pull-request 166的作者)创建了一个'选择'的分支
6. 人们已经开始放弃"选择"的harvesthq版本,转而使用koenpunt fork