Select2 jQueryプラグインを使用して強調する選択入力フィールドがあります。私は、minimumInputLengthプロパティを渡して、一致するアイテムを設定する前にユーザータイプをいくつかの文字にしました。ただし、必要に応じてユーザーが選択をクリアする方法についてはわかりません。Select2でminimumInputLengthが使用されているときに選択を解除します
私はallowClearプロパティを渡そうとしましたが、 'X'が表示されている間、ボタンは機能せず、選択が残ります。
EDIT：
jsfiddle link: https://jsfiddle.net/8f1u48et/
あなたのSelectセレクトjQueryプラグインを初期化するときplaceholderプロパティを定義する必要があります。これはプラグインで必要です。
更新されたコードは次のようになります。あなたはthis JSFiddleに取り組ん例を確認することができます
$('#members').select2({
minimumInputLength: 3,
allowClear: true,
placeholder: ''
});
。何かを選択したら、クリアボタンをクリックすると現在の選択が削除されます。 placeholderがこの質問に捧げa section of the documentationですが、現時点では、それはまだ回答されていない、このプラグインを必要としているという事実について
...
あなたは何が起こっているかをより詳細に制御する必要がある場合コンポーネントのライフサイクル中にSelect2がトリガーするイベントのリストは、the documentationにあります。例えば
、（あなたはクリアボタンをクリックしたときのように）選択が削除される前にトリガされunselectingイベントにリスナーを添付し、あなたが使用します：
$('#members').on('select2:unselecting', function (evt) {
// Do something...
});
迷惑もあります選択肢をクリアして削除するときに、Select2がドロップダウンメニューを誤って切り替えるバグ。
問題はtheir Githubに記載されていますが、まだクローズされておらず、修正もされていません。多くの回避策はselect2:unselectイベントの直後に発生select2:opening/closingイベントをキャンセルするように、このスレッドで使用できます。
var $element = $('#members');
$element.on('select2:unselect', function() {
function cancelAndRemove(event) {
event.preventDefault()
removeEvents()
}
function removeEvents() {
$element.off('select2:opening', cancelAndRemove)
$element.off('select2:closing', cancelAndRemove)
}
$element.on('select2:opening', cancelAndRemove)
$element.on('select2:closing', cancelAndRemove)
setTimeout(removeEvents, 0)
});
ユーザーがクリックしたときにX選択した値を除去し、SELECT2パネルがあるされるように、あなたはselect2:unselectingイベントを使用することができますこれ以上開かない：
$(function() {
$('#members').select2({
placeholder: "Select a member",
minimumInputLength: 3,
allowClear: true
});
// when you click on the X....
$('#members').on('select2:unselecting', function(e) {
// prevent the default action
e.preventDefault();
// deselect....
$('#members').val('');
// inform select2 of deselecting....
$('#members').trigger('change.select2');
})
});<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="members" style="width: 100%;">
<option value=""> </option>
<option value="300001">Daniel Akaka Kahikina</option>
<option value="300002">Lamar Alexander</option>
<option value="300003">Wayne Allard A.</option>
<option value="300004">George Allen Felix</option>
<option value="300005">John Smith</option>
</select>
あなたは番目として 'プレースホルダと' 空白を持っていますか最初のオプションは '
JSFiddleを追加して問題を再現できますか、それを再現することはできませんか？ – HiDeo
作成完了jsfiddle –