jQuery プラグインは入力と自動マッチングのドロップダウンボックスを実装します。-jsチュートリアル-php.cn

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

1. h5 の新しいタグを直接使用します。対応するデモは次のとおりです。

利点: js コードの節約;

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

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 部分は非常に単純で、直接:

< ;/div>

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

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

ログイン後にコピー

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

4. 上記のデフォルトのプラグインは複数選択スタイルなので、プロジェクト内で使用します。ここで、

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

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