【Select2】カスタム検索の作成


# はじめに

select2 という便利な javascriptライブラリで、検索を簡単に実装できますが、
漢字だけでなく、ふりがなでも検索したいケースがあると思います。

そのやり方をこちらで紹介させていただきます。
どなたかの役に立てばなーと思います。

# ソースコード

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" />
    <title></title>
  </head>
  <body>
    <div>
      <span>項目１つを検索</span>
      <span>（ひらがなでも検索できます。）</span>
      <select id="oneItemSearch" style="width: 300px;">
        <option value="0" selected>デフォルト</option>
        <option value="1" data-sub-search="りんご">apple</option>
        <option value="2" data-sub-search="みかん">orange</option>
        <option value="3" data-sub-search="ばなな">banana</option>
      </select>
    </div>

    <div>
      <span>複数項目で検索</span>
      <span>（ひらがなとカタカナでも検索できます。）</span>
      <select id="twoItemSearch" style="width: 300px;">
        <option value="0" selected>デフォルト</option>
        <option value="1" data-sub-search="りんご" data-sub-two-search="リンゴ">apple</option>
        <option value="2" data-sub-search="みかん" data-sub-two-search="ミカン">orange</option>
        <option value="3" data-sub-search="ばなな" data-sub-two-search="バナナ">banana</option>
      </select>
    </div>
  </body>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
  <!-- select2用JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
  <script type="text/javascript">
    var customMatcher = function(params, data, select2SearchStr) {
      var modifiedData;
      if ($.trim(params.term) === '') {
        return data;
      }
      if (typeof data.text === 'undefined') {
        return null;
      }
      if (data.text.indexOf(params.term) > -1) {
        modifiedData = $.extend({}, data, true);
        return modifiedData;
      }

      // 
      if (select2SearchStr === null || select2SearchStr === void 0) {
        return null;
      }
      if (select2SearchStr.toString().indexOf(params.term) > -1) {
        modifiedData = $.extend({}, data, true);
        return modifiedData;
      }
      return null;
    };

    // サブ検索項目1つで検索する
    var oneSearch = function(params, data) {
      var item;
      // data属性 sub-search の内容を検索する
      item = $(data.element).data('sub-search');
      return customMatcher(params, data, item);
    };

    // サブ検索項目複数で検索する
    var twoSearch = function(params, data) {
      var item_1, item_2, items;
      // data属性 sub-search の内容を検索する
      item_1 = $(data.element).data('sub-search');
      // data属性 sub-two-search の内容を検索する
      item_2 = $(data.element).data('sub-two-search');

      // 複数項目で検索したい場合は配列を入力する
      items = [item_1, item_2]
      return customMatcher(params, data, items);
    };

    $("#oneItemSearch").select2({
      // 上で作った oneSearch メソッドを指定
      matcher: oneSearch
    });

    $("#twoItemSearch").select2({
      // 上で作った twoSearch メソッドを指定
      matcher: twoSearch
    });
  </script>
</html>

```


# 参考
* Select2 公式Document
    * https://select2.org/searching

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/