jQuery Chosen セレクトボックスを装飾する

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オプションで文字列を設定しています。
検索して対象の文字列がなかったときに表示されます。

関連の記事

jQuery セレクトボックスの値を取得/設定する
JavaScript セレクトボックスの値を取得/設定するサンプル

△上に戻る