jQuery は Selectator プラグインを使用して複数選択ドロップダウン リスト フィルター ボックスを実装します (ソース コードのダウンロード付き)_jquery

Selectator是一款實現多重選擇和搜尋過濾功能的jQuery下拉列錶框插件。它支援搜索，並且能直接影響原始的選擇框，而原始的選擇框是用作資料容器。透過此下拉列錶框插件可以多選項進行分組，設定選項的圖標，對選項進行搜尋過濾，以及進行多選選擇。

 

效果展示       原始碼下載

使用方法

使用此下拉類別框外掛程式需要在頁面中引入fm.selectator.jquery.css、jQuery和fm.selectator.jquery.js檔案。

<link rel="stylesheet" href="fm.selectator.jquery.css"/>
<script src="jquery-1.11.0.min.js"></script>
<script src="fm.selectator.jquery.js"></script>

HTML結構

一個選項帶圖示級帶分組選項的下拉清單的HTML結構如下：

<label for="select">
Multi select with custom content:
</label>
<select id="select" name="select" multiple>
<optgroup label="Group one" class="group_one">
<option value="1" class="option_one" data-subtitle="Et" data-left="<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201604/2016040814141246.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="jQuery は Selectator プラグインを使用して複数選択ドロップダウン リスト フィルター ボックスを実装します (ソース コードのダウンロード付き)_jquery" >" data-right="1">One</option>
<option value="2" class="option_two" data-subtitle="To" data-left="<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201604/2016040814141246.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="jQuery は Selectator プラグインを使用して複数選択ドロップダウン リスト フィルター ボックスを実装します (ソース コードのダウンロード付き)_jquery" >" data-right="2">Two</option>
</optgroup>
<optgroup label="Group two" class="group_two">
<option value="3" class="option_three" data-subtitle="Tre" data-left="<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201604/2016040814141246.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="jQuery は Selectator プラグインを使用して複数選択ドロップダウン リスト フィルター ボックスを実装します (ソース コードのダウンロード付き)_jquery" >" data-right="3">Three</option>
<option value="4" class="option_four" selected data-left="<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201604/2016040814141246.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="jQuery は Selectator プラグインを使用して複数選択ドロップダウン リスト フィルター ボックスを実装します (ソース コードのダウンロード付き)_jquery" >" data-right="4">Four</option>
<option value="5" class="option_five" selected data-left="<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201604/2016040814141246.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="jQuery は Selectator プラグインを使用して複数選択ドロップダウン リスト フィルター ボックスを実装します (ソース コードのダウンロード付き)_jquery" >" data-right="5">Five</option>
<option value="6" class="option_six">Six</option>
</optgroup>
<optgroup label="Group three" class="group_three">
<option value="7" class="option_seven">Seven</option>
</optgroup>
<option value="8" class="option_eight" data-subtitle="Otte">Eight</option>
<option value="9" class="option_nine">Nine</option>
<option value="10" class="option_ten" selected>Ten</option>
<option value="11" class="option_eleven" selected>Eleven</option>
<option value="12" class="option_twelve">Twelve</option>
<option value="13" class="option_thirteen">Thirteen</option>
<option value="14" class="option_fourteen">Fourteen</option>
</select>
<input value="activate selectator" id="activate_selectator4" type="button">

初始化外掛程式

在頁面DOM元素載入完畢之後，可以透過selectator()方法來初始化該下拉清單外掛程式。

$('#selectBox').selectator();

你也可以直接用標籤來初始化它：

<select multiple class="selectator" data-selectator-keep-open="true">

設定參數

$('#selectBox').selectator({
prefix: 'selectator_', // CSS class prefix
height: 'auto', // auto or element
useDimmer: false, // dims the screen when option list is visible
u**arch: true, // if false, the search boxes are removed and 
// `showAllOptionsOnFocus` is forced to true
keepOpen: false, // if true, then the dropdown will not close when 
// selecting options, but stay open until losing focus
showAllOptionsOnFocus: false, // shows all options if input box is empty
selectFirstOptionOnSearch: true, // selects the topmost option on every search
searchCallback: function(value){}, // Callback function when enter is pressed and 
// no option is active in multi select box
labels: {
search: 'Search...' // Placeholder text in search box in single select box
}
});

其它可用的屬性標籤

透過使用data-left、data-right和data-subtitle標籤你可以擴充下拉清單的顯示資訊。它們可以透過CSS來設定樣式，CSS的前綴為：prefix_title、prefix_left、prefix_right和prefix_subtitle。這些資料都是純HTML程式碼，所以你也可以使用圖片程式碼。

<select id="selectBox">
<!-- Normal option tag -->
<option value="1">This is the title</option>
<!-- Extended option tag -->
<option value="2" data-left="This is the left section"
data-right="This is the right section"
data-subtitle="This is the section under the title">This is the title</option>
</select>

のコードは、次のような構造として表示されます:

CSS クラス

を示します。

class	Description
prefix_element	This is a new drop-down list box. It comes with the same extra classes: single and multiple , which are used to set whether it is single selection or multiple selection.Also options-visible and options-hidden 用於設定選項是否可見
prefix_chosen_items	被選擇的選項的容器
prefix_chosen_item	目前被選擇的選項的容器
prefix_chosen_item_title	目前被選取的選項的標題
prefix_chosen_item_left	目前被選擇的選項的左邊的內容
prefix_chosen_item_right	目前被選擇的選項的右側的內容
prefix_chosen_item_subtitle	目前被選取的選項的子標題
prefix_chosen_item_remove	目前被選擇的選項的移除按鈕
prefix_input	これはセレクターの入力ボックスであり、options-visible または options-hidden と一緒に使用して、複数選択ボックスまたは単一選択ボックスの場合に表示およびスタイルを変更します。
prefix_textlength	複数選択ボックスの入力サイズを計算するために使用されます
prefix_options	オプションリストコンテナ
prefix_group_header	グループタイトル
プレフィックスグループ	グループコンテナ
プレフィックスオプション	結果のオプション。クラス active を使用して、現在アクティブ化されているオプション
prefix_option_title	結果オプションのタイトル
prefix_option_left	結果オプションの左側のコンテンツ
prefix_option_right	結果オプションの右側のコンテンツ
prefix_option_subtitle	結果オプションの右側に字幕を付けます
prefix_dimmer	調光器

Method

方法	描述
refresh	该方法用于刷新插件
destroy	该方法用于销毁插件

The github address of jquery.selectator-custom drop-down list plug-in is:

https://github.com/Lepshey/jquery.selectator-custom