jQueryのChosenプラグインで、セレクトボックスを装飾するサンプルです。
目次
| プラグイン | Chosenプラグイン |
| サンプル | セレクトボックスを装飾する |
| 値をグループ分けする | |
| あいまい検索する | |
| 検索結果が0件のときの表示 |
Chosenプラグイン
- セレクトボックスを装飾します。
- jQueryのプラグインです。動かすにはjQueryが必要です。
- jquery.min.jsに加えてchosen.jquery.min.jsとchosen.cssを使用します。
- 以下はjQueryプラグインのChosenのリンクです。
https://harvesthq.github.io/chosen/
セレクトボックスを装飾する
セレクトボックスを装飾します。
普通のセレクトボックスには付いていない検索する入力欄もあります。
「とま」と検索欄に入力すると「とまと」がヒットします。
コード
上記サンプルのコードです。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<select data-placeholder="商品を選択して下さい" class="chosen1">
<option value=""></option>
<option value="ringo">りんご</option>
<option value="mikan">みかん</option>
<option value="banana">ばなな</option>
<option value="ninjin">にんじん</option>
<option value="tomato">とまと</option>
<option value="retasu">レタス</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script>
$(function() {
$(".chosen1").chosen({
width: "200px"
});
});
</script>3～13行目は、セレクトボックスです。
3行目のdata-placeholderは、選択前に表示される文言です。4行目の空白欄も必要です。
19行目の一文でchosenプラグインを使用します。
値をグループ分けする
選択する値に「くだもの」と「野菜」というグループのラベルをつけています。
コード
上記サンプルのコードです。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<select data-placeholder="商品を選択して下さい" class="chosen2">
<option value=""></option>
<optgroup label="くだもの">
<option value="ringo">りんご</option>
<option value="mikan">みかん</option>
<option value="banana">ばなな</option>
<optgroup label="野菜">
<option value="ninjin">にんじん</option>
<option value="tomato">とまと</option>
<option value="retasu">レタス</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script>
$(function() {
$(".chosen2").chosen({
width: "200px"
});
});
</script>5,9行目は、グループごとのラベルになります。optgroupをつけます。
あいまい検索する
入力欄であいまい検索できます。部分一致検索です。
「ま」と検索欄に入力すると「とまと」がヒットします。
コード
上記サンプルのコードです。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<select data-placeholder="商品を選択して下さい" class="chosen3">
<option value=""></option>
<option value="ringo">りんご</option>
<option value="mikan">みかん</option>
<option value="remon">レモン</option>
<option value="ninjin">にんじん</option>
<option value="tomato">とまと</option>
<option value="retasu">レタス</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script>
$(function() {
$(".chosen3").chosen({
width: "200px",
search_contains:true
});
});
</script>19行目は、search_containsオプションにtrueを設定しています。
あいまい検索ができるようになります。
検索結果が0件のときの表示
検索結果が0件のときの表示を設定できます。
検索欄に「オレンジ」と入力すると「ありません」と表示されます。
コード
上記サンプルのコードです。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<select data-placeholder="商品を選択して下さい" class="chosen4">
<option value=""></option>
<option value="ringo">りんご</option>
<option value="mikan">みかん</option>
<option value="remon">レモン</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script>
$(function() {
$(".chosen4").chosen({
width: "200px",
no_results_text:"ありません"
});
});
</script>16行目は、no_results_textオプションで文字列を設定しています。
検索して対象の文字列がなかったときに表示されます。
関連の記事