17

ハーベスト (http://harvesthq.github.com/chosen/) で「Chosen」プラグインを使用しようとしていますが、これは渡したオプションの静的セットで機能します。ただし、私が望むのは、事前に入力されたオプションにないものを誰かが入力するたびに、それを新しいオプションとしてサーバーに送信し、応答が成功したときに、それを有効なリストに追加するだけでなく、オプションだけでなく、それを選択させます。

オプションのリロードは非常に簡単です:

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

ただし、「Chosen」プラグインにこれ​​を値として選択させる方法がわかりません。私は次のようなことをしたいと思います

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

または似たようなもの。

助言がありますか?

(ps: 選択したものに基づいて「タグ付け」プラグインを構築しようとしています。そのため、入力されたタグが存在しない場合は、サーバーに追加され、すぐに選択されます。)

4

8 に答える 8

10

これらは、この問題を解決するために選択したプラグイン(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オブジェクトです。

this.result_highlight=newElement;を実行することによって およびthis.result_select(evt); 選択したプラグインにこれ​​を選択するように指示します。これは、単一選択でも複数選択でも機能します。Rifkyのソリューションは、単一選択に対してのみ機能します。

于 2012-03-14T09:08:03.423 に答える
10

私はちょうどこれをやっています。選択された設定の Shreeni のセリフが気に入らなかったので (違反はありません)、一緒に行きました

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

個人的には少しきれいだと思います(マルチセレクトボックスでテストされ、正常に動作します)

于 2012-04-16T18:36:08.987 に答える
6

必要な機能を含むフォークがここに作成されています。このフォークは koenpunt フォークと呼ばれます。

この機能に関するディスカッションは、harvethq github サイトで確認できます。

何が起こったかの私の要約:

  1. 多くの人がこの機能を望んでいます
  2. 数人が提案されたソリューションでプルリクエストを作成しました
  3. 最善の解決策はプルリクエスト 166です
  4. 「chosen」の作成者は、この機能を含めないことを決定しました
  5. koenpunt (pull-request 166 の作成者) が「chosen」のフォークを作成しました
  6. 人々はkoenpunt フォークを支持して「chosen」のハーベスティック バージョンを放棄し始めました
于 2013-07-02T15:39:16.187 に答える
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 キーを押して「オレンジ」を追加します。

コールバックは、必要な手段で新しい用語を登録し、新しいオプションの ID (または基になる選択要素のコンテキスト内の値) を返す必要があります。

var addTagCallback = function(tagText) {
  // do some synchronous AJAX 
  return tagID;
};
于 2013-08-08T13:27:45.373 に答える
1

私はこのように単純に行い、完全に機能します:

// 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");
于 2013-08-21T14:33:58.743 に答える
0

あなたのajax応答で、試してください

var newOption = new Option("Text", __value__);  
$("#tagSelection").append(newOption);  
**/*  add this line */  
$("#tagSelection").val(__value__);**  
$("#tagSelection").trigger("liszt:updated");  
于 2012-03-14T05:08:18.087 に答える
0

あまりストレスを感じる必要はありません。シンプルにしてください。選択ボックスのhtmlにajaxレスポンスを追加してから、選択したものを更新する必要があります。

これは次のようになります。

コード:

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

   });   
于 2017-01-10T07:09:34.290 に答える
0

ベストプラクティスではないと思いますが、このコードは私にとってはうまくいきます。データ リターンには html タグがあります<option>

$.post("url.php",{data:data},function(data){
$('.choosen').empty().append(data);
$(".choosen").trigger("liszt:updated");
});
于 2013-05-03T07:14:41.877 に答える