有没有办法通过 jquery 选择的插件动态地添加元素? [英] Is there a way to dynamically ajax add elements through jquery chosen plugin?

问题描述

我正在尝试通过 Harves (http://harvesthq.github.com/chosen/) 使用Chosen"插件，它适用于我传递的静态选项集.但是，我想要的是，每当有人键入不在预填充选项中的内容时，它应该将其作为新选项发送到服务器并在成功响应时，我不仅想将其添加到有效列表中选项，但也让它选择它.

I am trying to use "Chosen" plugin by harvest (http://harvesthq.github.com/chosen/) and it works for the static set of options I am passing. However, what I want is that whenever anybody types something that is not in the pre-filled options, then it should send that to the server as a new option and on successful response, I want to not only add that to the valid list of options, but also make it select it.

重新加载选项相当简单:

Reloading the options is fairly simple:

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

但是，我不知道如何让Chosen"插件选择这个作为值.我很想做类似的事情

However, I don't know how to make "Chosen" plugin pick this as the value. I would love to do something like

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

或类似的东西.

有什么建议吗?

(ps:我正在尝试构建一个基于选择的标记"插件.因此，如果输入的标记不存在，它会将其添加到服务器然后立即选择它.)

(ps: I am trying to build a "tagging" plugin based on chosen. So, if the tag being typed doesn't exist, it will add it to the server and then select it straight away.)

推荐答案

这些是我为解决这个问题对所选插件(jquery 版本)所做的完整更改

These are the complete set of changes I did to the chosen plugin (jquery version) to solve this problem

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

The this.new_term_to_be_added maintains the currently typed string which is not among the pre-defined options.

options.addNewElementCallback 是调用函数的回调，以允许他们处理它(将其发送到服务器等)，它必须是同步的.下面是骨架:

The options.addNewElementCallback is the callback to the calling function to allow them to process it (send it to server etc.) and it has to be synchronous. Below is the skeleton:

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 对象.

The newElement is a jquery element - the latest added li object to list of options.

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

By doing this.result_highlight = newElement; and this.result_select(evt); I tell the Chosen plugin to select this. This works whether it is a single select or a multi-select. Rifky's solution will work only for single select.

这篇关于有没有办法通过 jquery 选择的插件动态地添加元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！