jQuery プラグインは入力と自動マッチングのドロップダウン ボックスを実装します。

自動マッチング機能を備えた入力 + ドロップダウン ボックスを実装するために、次の方法を試しました:

1. h5 の新しいタグ

利点: js コードの節約;

欠点: IE 9 以下の IE ブラウザと Safari は fc86e7b705049fc9d4fccc89a2e80ee3 タグをサポートしていないようです (入力ボックスまたはドロップの繰り返しクリックもサポートしていないようです)。ダウンアイコンはドロップダウンリストを復元しません; スタイルを制御するのは難しいです

2. jQuery ベースの select2 プラグインを使用します (select2.css と select2.js を同時に導入する必要があります)。コードの一部は次のとおりです:

<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>

js コードの一部は次のとおりです:

<select class="select2_test" >
 <option></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>

注: bootstrap の Modal モーダル ボックスと組み合わせて使用​​すると、マスクレイヤーの下部にドロップダウンリストが表示され、ポップアップボックスの閉じるボタンをクリックしてもドロップダウンリストが消えません。しばらく探した結果、問題はselect2.cssにあることがわかりました。このスタイル シートでは、

理由: 入力ボックスをクリックすると、このプラグインはマスク レイヤー (クラス名 .select2-drop-mask) とドロップダウン リスト (クラス名 .select2-drop) を生成します。カスケード (z-index) は 9991、9992 ですが、モーダル ポップアップ ボックスのカスケードは 10000 を超えているため、上記 2 つの問題が発生します

解決策: .select2-drop-mask と .select2- の場合drop z-index はそれぞれ 19991 と 19992 に増加し、ドロップダウン リストは正常に表示されますが、ドロップダウン リストを開いた状態でモーダル ポップアップ ボックスの閉じるボタンをクリックすると、ドロップダウン リストが表示されます。 -down ボックスが最初に閉じられ、もう一度クリックしてポップアップ ウィンドウを閉じることができます。ユーザー エクスペリエンスはあまり良くありません。親要素が指定されている場合は、閉じるボタンの z-index を増やすことができます。モーダル ポップアップ ボックスにすることはできません。そうでない場合、増加した Z インデックスは無効になります。

3. select2.js の上記の不快感の主な理由は、select2-drop-mask をクリックすることによってのみ select2-drop のフォーカスが失われることです。このメカニズムを改善するために、ここに別のドロップがあります。 jQuery ベースの検索ボックスのプラグイン magicsuggest (magicsuggest.css と magicsuggest.js を同時に導入する必要があります)、HTML 部分は非常に単純で、直接:

ee4c45cf54483bcbeeb7b38dff558a32325b94d06936b1d0ee2339101c5bc027

js パート コードは次のとおりです:

$('.select2_test').select2({
 placeholder: "请选择所属选项",
 allowClear: true;
});

利点: 美しいスタイルの連鎖的な競合はありません。エラー プロンプト、複数選択など）、特定のニーズに応じて調整する必要があります。 スタイル。データ量が多すぎる場合、元の入力ボックスの値を $(this).val() から直接取得できません。読み込みが遅くなる可能性があります

4. 上記のデフォルトのプラグインは複数選択スタイルなので、プロジェクト内で使用します。ここで、221f08282418e2996498697df914ce4e タグ内の値を直接取得することはできません。選択したプラグイン (chosen.css と selected.js を同時に導入する必要があります) コードの html 部分は次のとおりです:

$('#magicsuggest').magicSuggest({
　　placeholder:''，
　　allowFreeEntries: false,
　　maxSelection:1,
　　autoSelect:true,
　　valueField:"id",
　　displayField:"value",
　　resultAsString:true,
　　selectionStacked: true,
　　highlight:false,
　　data: ['Paris', 'New York', 'Gotham']
});

コードの js 部分は次のとおりです。

<select data-placeholder="Type &#39;C&#39; to view" style="width:100%" class="myselect chosen-select-no-results" tabindex="10">
 <option value=""></option>
 <option>American Black Bear</option>
 <option>Asiatic Black Bear</option>
 <option>Brown Bear</option>
 <option>Giant Panda</option>
 <option>Sloth Bear</option>
 <option>Sun Bear</option>
 <option>Polar Bear</option>
 <option>Spectacled Bear</option>
</select>

注: ブートストラップのモーダルモーダルボックスと組み合わせて使用​​すると、ドロップダウンリストは .modal-body の右側に表示されません。その理由は、ブートストラップが .modal-body を与えるためです。 overflow-y:auto のデフォルト スタイルが設定されているため、解決策は、overflow-y:visible スタイルを .modal-body に追加してオーバーライドすることです。