41

プラグイン Chosen for Multiple Selectを使用してドロップダウン メニューを作成しようとしています。私が基づいている動作は次のとおりです。

http://jsfiddle.net/JfLvA/

したがって、私の選択で 3 つのハードコードされた < option > を使用する代わりに。このリストを、ajax リクエストによって設定された json 配列の値にしたいと考えています。これは、オートコンプリートによってトリガーされます。

したがって、ユーザーが「car」と入力すると、ajax 呼び出しを介して文字を送信し、次のような配列を取得します。

[{"id":"2489","名前":"キャリー"},{"id":"2490","名前":"キャロライン"},{"id":"2491","名前": "キャロル"}]

コード：

$(function() {

$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});

$('.chzn-choices input').autocomplete({
   source: function( request, response ) {
      $.ajax({
          url: "/change/name/autocomplete/"+request.term+"/",
          dataType: "json",
          success: function( data ) {
             response( $.map( data, function( item ) {
                $('ul.chzn-results').append('<li class="active-result">' + item.name + '</li>');

          }
       });
    }
});

結果：

「車」と入力すると、ドロップダウンに「車の結果がありません」と表示され、必要に応じてすべての結果が表示されます。

1.「結果がありません」というメッセージが表示される理由は、json 配列とリスト内に結果が表示されていることがわかるからです。

 -----------------------------

「car」を削除して「sam」と入力すると。「sam」の結果は、「car」の結果の後に表示されます。(基本的に、現在の検索結果だけではなく、両方の結果が表示されます)

2. keyUp で ul をクリアすると思いますか?? プラグインはすでにそれを行っていると思った

 -----------------------------

名前をクリックして実際に選択し、選択に追加すると、 selected.js ファイル内で javascript エラーが発生します

item は未定義
の "item.selected = true;" 732行目

プラグインへのリンク: http://harvesthq.github.com/chosen/chosen/chosen.jquery.js

選択内に何も追加していません。

3.なぜこれが起こっているのか分かりません

 -----------------------------

私が何か間違ったことをしていることについて何か考えがありますか？私は完全にここで立ち往生しています... ！

ところで、プラグインのソースを変更してもかまいません。それは私が使用している唯一の場所だからです....

4

12 に答える 12

45

優れたSelect2プラグインを使用して、AJAX 経由でリストを動的に作成できます。「jquery で選択したプラグインを使用して要素を動的に ajax 追加する方法はありますか?」に対する私の回答から。:

Chosen自体に基づいており、リモート データ ソース (別名 AJAX データ) と無限スクロールをサポートする、きちんとしたSelect2プラグインを見てみましょう。

于 2013-01-26T12:29:26.973 に答える
30

これを試して：

$('.chzn-choices input').autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "/change/name/autocomplete/"+request.term+"/",
      dataType: "json",
      beforeSend: function(){$('ul.chzn-results').empty();},
      success: function( data ) {
        response( $.map( data, function( item ) {
          $('ul.chzn-results').append('<li class="active-result">' + item.name + '</li>');
        }));
      }
    });
  }
});
于 2012-08-20T20:46:07.550 に答える
22

Ashirvadの答えは機能しなくなりました。クラス名が変更され、 li要素の代わりにoption要素が使用されていることに注意してください。非推奨の「成功」イベントを使用せず、代わりに .done() を選択するように回答を更新しました。

$('.chosen-search input').autocomplete({
    minLength: 3,
    source: function( request, response ) {
        $.ajax({
            url: "/some/autocomplete/url/"+request.term,
            dataType: "json",
            beforeSend: function(){ $('ul.chosen-results').empty(); $("#CHOSEN_INPUT_FIELDID").empty(); }
        }).done(function( data ) {
                response( $.map( data, function( item ) {
                    $('#CHOSEN_INPUT_FIELDID').append('<option value="blah">' + item.name + '</option>');
                }));

               $("#CHOSEN_INPUT_FIELDID").trigger("chosen:updated");
        });
    }
});
于 2014-05-09T14:52:33.610 に答える
13

これは役立つかもしれません。イベントをトリガーするだけです。

$("#DropDownID").trigger("liszt:updated");

"DropDownID" は の ID です<select>。

詳細はこちら: http://harvesthq.github.com/chosen/

于 2012-10-10T12:41:41.067 に答える
6

選択された回答は古くなっています。同じことは、meltice /ajax-chosen プラグインにも当てはまります。

Select2 プラグインには多くのバグがあり、解決できません。

ここに、この質問に対する私の答えがあります。

ユーザータイプの後に関数トリガーを使用してソリューションを統合しました。この回答のおかげで: https://stackoverflow.com/a/5926782/4319179。

//setup before functions
  var typingTimer;                //timer identifier
  var doneTypingInterval = 2000;  //time in ms (2 seconds)
  var selectID = 'YourSelectId';    //Hold select id
  var selectData = [];           // data for unique id array

  //on keyup, start the countdown
  $('#' + selectID + '_chosen .chosen-choices input').keyup(function(){

      // Change No Result Match text to Searching.
      $('#' + selectID + '_chosen .no-results').html('Searching = "'+ $('#' + selectID + '_chosen .chosen-choices input').val() + '"');


      clearTimeout(typingTimer);  //Refresh Timer on keyup 
      if ($('#' + selectID + '_chosen .chosen-choices input').val()) {

           typingTimer = setTimeout(doneTyping, doneTypingInterval);  //Set timer back if got value on input

      }

  });

  //user is "finished typing," do something
  function doneTyping () {

      var inputData = $('#' + selectID + '_chosen .chosen-choices input').val();  //get input data

      $.ajax({
        url: "YourUrl",
         data: {data: inputData},
        type:'POST',
        dataType: "json",
        beforeSend: function(){
          // Change No Result Match to Getting Data beforesend
          $('#' + selectID + '_chosen .no-results').html('Getting Data = "'+$('#' + selectID + '_chosen .chosen-choices input').val()+'"');
    },
        success: function( data ) { 

          // iterate data before append
          $.map( data, function( item ) {

            // matching data eg: by id or something unique; if data match: <option> not append - else: append <option>
            // This will prevent from select the same thing twice.
            if($.inArray(item.attr_hash,selectData) == -1){

              // if not match then append in select
              $('#' + selectID ).append('<option id="'+item.id+'" data-id = "'+item.id+'">' + item.data + '</option>');

            }            

          });

          // Update chosen again after append <option>
          $('#' + selectID ).trigger("chosen:updated");

        }
      });

  }

  // Chosen event listen on input change eg: after select data / deselect this function will be trigger
  $('#' + selectID ).on('change', function() {

    // get select jquery object
    var domArray = $('#' + selectID ).find('option:selected');

    // empty array data
    selectData = [];

    for (var i = 0, length = domArray.length; i < length; i++ ){

      // Push unique data to array (for matching purpose)
      selectData.push( $(domArray[i]).data('id') );

    }

    // Replace select <option> to only selected option
    $('#' + selectID ).html(domArray);

    // Update chosen again after replace selected <option>
    $('#' + selectID ).trigger("chosen:updated");

  });
于 2016-11-03T04:54:13.993 に答える
2

Vicky が提案したように、Select2 には AJAX 機能が組み込まれており、優れたプラグインのように見えます。

Chosen から切り替えたくない場合は、AJAX-Chosen https://github.com/meltingice/ajax-chosenを試してください。

于 2013-07-21T12:41:40.680 に答える
1

選択された API は大幅に変更されました。

与えられた解決策がうまくいかない場合は、これを試すことができます: https://github.com/goFrendiAsgard/gofrendi.chosen.ajaxify

関数は次のとおりです。

// USAGE:
// $('#some_input_id').chosen();
// chosen_ajaxify('some_input_id', 'http://some_url.com/contain/');

// REQUEST WILL BE SENT TO THIS URL: http://some_url.com/contain/some_term

// AND THE EXPECTED RESULT (WHICH IS GOING TO BE POPULATED IN CHOSEN) IS IN JSON FORMAT
// CONTAINING AN ARRAY WHICH EACH ELEMENT HAS "value" AND "caption" KEY. EX:
// [{"value":"1", "caption":"Go Frendi Gunawan"}, {"value":"2", "caption":"Kira Yamato"}]

function chosen_ajaxify(id, ajax_url){
    console.log($('.chosen-search input').autocomplete);
    $('div#' + id + '_chosen .chosen-search input').keyup(function(){
        var keyword = $(this).val();
        var keyword_pattern = new RegExp(keyword, 'gi');
        $('div#' + id + '_chosen ul.chosen-results').empty();
        $("#"+id).empty();
        $.ajax({
            url: ajax_url + keyword,
            dataType: "json",
            success: function(response){
                // map, just as in functional programming :). Other way to say "foreach"
                $.map(response, function(item){
                    $('#'+id).append('<option value="' + item.value + '">' + item.caption + '</option>');
                });
                $("#"+id).trigger("chosen:updated");
                $('div#' + id + '_chosen').removeClass('chosen-container-single-nosearch');
                $('div#' + id + '_chosen .chosen-search input').val(keyword);
                $('div#' + id + '_chosen .chosen-search input').removeAttr('readonly');
                $('div#' + id + '_chosen .chosen-search input').focus();
                // put that underscores
                $('div#' + id + '_chosen .active-result').each(function(){
                    var html = $(this).html();
                    $(this).html(html.replace(keyword_pattern, function(matched){
                        return '<em>' + matched + '</em>';
                    }));
                });
            }
        });
    });
}

HTML は次のとおりです。

<select id="ajax_select"></select>

そして、ここにあなたのjavascriptがあります：

// This is also how you usually use chosen
$('#ajax_select').chosen({allow_single_deselect:true, width:"200px", search_contains: true});
// And this one is how you add AJAX capability
chosen_ajaxify('ajax_select', 'server.php?keyword=');

詳細については、https://github.com/goFrendiAsgard/gofrendi.chosen.ajaxify#how-to-useを参照してください。

于 2015-10-18T08:44:37.507 に答える
0

2 つ以上の選択があり、Steve McLenithan の回答を使用する場合は、最初の行を次のように置き換えてみてください。

$('#CHOSENINPUTFIELDID_chosen > div > div input').autocomplete({

サフィックスを削除しない:_chosen

于 2016-02-23T17:50:39.870 に答える
0

ajax から選択タグを生成している場合は、成功関数内にこれを追加します。

$('.chosen').chosen();

または、[さらに追加] ボタンをクリックして選択タグを生成している場合は、次を追加します。

$('.chosen').chosen();

関数内。

于 2019-04-22T17:01:11.677 に答える