15

選択したプラグインを使用しています。

これをドキュメントに追加すると、テキスト フィールドに入力してリストに新しい項目を追加できなくなります。

$(document).ready(function (){    
    $(".chosen-select").trigger("chosen:updated");
});

これにより、ハードコードされたテキストをリストに追加できます。

$(document).ready(function (){
    $('.chosen-select').chosen();
    $('.addsomething').click(function (){
        $(".chosen-select").prepend("<option>Utopia</option>");
        $(".chosen-select").trigger("chosen:updated");
    });
});

私が望んでいるのは、テキスト フィールドにテキストを追加し、リターン キーを押して、選択していないエントリを追加できるようにしたいということです。オプション リストに永続的に追加する必要はありません。

4

7 に答える 7

28

もっと簡単な方法で実行できるかどうかはわかりませんが、これでうまくいきます。コードのコメントは、各ステップを説明しています。

var select, chosen;

// Cache the select element as we'll be using it a few times
select = $(".chosen-select");

// Init the chosen plugin
select.chosen({ no_results_text: 'Press Enter to add new entry:' });

// Get the chosen object
chosen = select.data('chosen');

// Bind the keyup event to the search box input
chosen.dropdown.find('input').on('keyup', function(e)
{
    // If we hit Enter and the results list is empty (no matches) add the option
    if (e.which === 13 && chosen.dropdown.find('li.no-results').length > 0)
    {
        var option = $("<option>").val(this.value).text(this.value);

        // Add the new option
        select.prepend(option);
        // Automatically select it
        select.find(option).prop('selected', true);
        // Trigger the update
        select.trigger("chosen:updated");
    }
});

これが実際の例です：http://jsfiddle.net/jHvmg/436/

于 2013-09-09T21:29:09.707 に答える
0

chosen.jquery.js関数内のファイルでは、 選択しAbstractChosen.prototype.choice_labelたテキストを変更できます

このような

AbstractChosen.prototype.choice_label = function(item) {
      if (this.include_group_label_in_selected && (item.group_label != null)) {
        return "<b class='group-name'>" + (this.escape_html(item.group_label)) + "</b>" + item.html;
      } else {
          return item.html.replace(/ *\([^)]*\) */g, "");;//Ashkufaraz Remove Post From Selected Text
      //  return item.html;
      }
    };
于 2020-04-12T06:18:32.743 に答える
-2

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

$('.choose').on('chosen:no_results',function(evt, params){
var value = params.chosen.search_results.find('span').text();
$('.choose').append(new Option(value, value,true).outerHTML);
$('.choose').trigger("chosen:updated");
});

于 2014-03-25T05:06:32.937 に答える