私がサービスを提供しているサイトの1つで、すばらしいjQueryプラグインcuSelを使用してselectをカスタマイズしています 。 構成が非常に簡単で、スクロールバーもカスタマイズできるという点で便利です。
しかし、場合によっては、要素のリストが非常に大きくなることがあります。 そして、適切なアイテムをすばやく見つけることはそれほど簡単ではありません。
テキストを入力し、要素を最初の文字でフィルタリングする機能を実現するタスクを取得したら。 リストはウクライナの都市の名前で構成されており、かなり長いものでした。 プラグイン自体にはこの機能がなく、顧客も私も美しいセレクトを放棄したくなかったため、スクリプトコードを少し改善することにしました。
今日、私はこれをすべてあなたと繰り返します。 これを行うには、プラグインページからデモを実行します。 アーカイブには、必要なすべてのライブラリとスタイルが含まれています。 index.htmlページで、著者はプラグインを接続して使用するいくつかの例を用意しました。 国のリストを含む最初の選択にフィルタリングを追加しましょう。
テキストを入力するには、透明なテキストフィールドを使用します。クリックすると、選択範囲の最上位レイヤーによって調整されます。 このフィールドに対応するcssクラスをcss / cusel.cssファイルに追加し、選択したリストアイテムのテキストが表示されるブロックに同じサイズを設定します。
.cusel .search-field { position: absolute; outline:0; border: 0; background: transparent; display:none; } .cusel .search-field, .cuselText { width: 144px; height: 20px; line-height:20px; padding: 3px 30px 3px 6px; }
必要な選択にのみフィルタリングを追加できるように、追加のフィルタリングクラスでマークを付けます。
<select class="sel80 filtering" id="country" name="country" tabindex="2">
js / cusel.jsファイルを開き、次のコードをcuselEvents関数に追加します。
jQuery(".cusel").each(function () { var itv; var elm = $(this); if (elm.hasClass("filtering") && elm.find(".search-field").length == 0) { var f = $("<input type='text' />") f.addClass("search-field"); f.keydown(function () { clearInterval(itv); var list = elm.find(".cusel-scroll-pane > span"); itv = setInterval(function () { list.each(function () { var item = $(this); item.show(); if (item.text().toLowerCase().indexOf(f.val().toLowerCase()) != 0) item.hide(); }); var d = elm.find(".cusel-scroll-pane").eq(0).attr("id"); jQuery("#" + d)[0].scrollTo(0); clearInterval(itv); }, 100); }); f.click(function () { $(this).val('').hide(); elm.focus(); }); elm.append(f); } });
このコードは何をしますか？ ページ上でクラス「cusel」を持つすべての要素を検索します このクラスは、様式化された選択で使用されます。 さらに、selectにフィルタリングクラスが指定され、検索フィールドクラス（テキスト入力フィールド）を持つ子がない場合、そのようなフィールドが作成され、イベントハンドラーがハングします。 ハンドラーは、フィールド内のキーストロークごとに、テキストがフィールド内のテキストと一致しないリスト内のアイテムを見つけ、それらを非表示にします。
次に、透明フィールドの上にある選択をクリックして表示されることを確認する必要があります。 これを行うには、同じcuselEvents 関数でクリックイベントハンドラーを見つけます。 「選択自体（テキスト）をクリックした場合」という著者のコメントでマークされたコードの部分を見つけて、次のように変更する必要があります。
/* () */ if((clickedClass.indexOf("cuselText")!=-1 || clickedClass.indexOf("cuselFrameRight")!=-1) && clicked.parent().prop("class").indexOf("classDisCusel")==-1) { var cuselWrap = clicked.parent().find(".cusel-scroll-wrap").eq(0); var parent = clicked.parents(".cusel"); if (parent.hasClass("filtering")) { var txt = parent.children(".cuselText"); var sf = parent.children(".search-field"); if(sf.is(":hidden")) { txt.text(""); sf.show().focus(); } else { txt.text(parent.find(".cuselActive").eq(0).text()); sf.val("").hide(); } } /* - */ cuselShowList(cuselWrap); }
テキスト入力フィールドは背景と重ならないように透明なので、selectで選択した要素のテキストをクリアします。 繰り返しクリックすると、アイテムが元の状態に戻ります。
リスト内のアイテムを選択すると、フィールドが逆に非表示になるようにします。 以下で、著者のコメントが「リスト内の位置を選択した場合」とマークされたブロックを見つけ、次のコードを追加します
else if(clicked.is(".cusel-scroll-wrap span") && clickedClass.indexOf("cuselActive")==-1) { var parent = clicked.parents(".cusel"); if (parent.hasClass("filtering")) { parent.children(".search-field").val('').hide(); parent.find(".cusel-scroll-pane > span").show(); } // }
ご覧のとおり、フィルタリング中にリストアイテムを非表示にします。
ユーザーがリスト全体をクリックし、リストを閉じてフィルターフィールドを非表示にするのは論理的です。 そのため、著者のコメントでマークされたブロックの下にある「リストの外側をクリックした場合、開いているリストを非表示にする」を見つけて、次のように変更します。
/* , */ else { var wrap = jQuery(".cusel-scroll-wrap"); var parent = wrap.parents(".cusel"); parent.each(function () { var elm = $(this); if (elm.hasClass("filtering")) { elm.find(".cuselText").text(elm.find(".cuselActive").eq(0).text()); elm.find(".search-field").val('').hide(); elm.find(".cusel-scroll-pane > span").show(); } }); wrap.hide(); parent.removeClass("cuselOpen") }
そして今、最後の仕上げ。 cuselEvents関数の最後に、次のコメントでマークされたコードがあります
/* ( Alexey Choporov) 0.5 keypress */
Alexeyの関数は、最初の文字で適切な値を選択します。 数文字で選択の可能性を認識しています。 したがって、競合を避けるために、Alexeyのコードはコメントアウトする必要があります。
ソースコード