はじめに
select2 という便利な javascriptライブラリで、検索を簡単に実装できますが、
漢字だけでなく、ふりがなでも検索したいケースがあると思います。
そのやり方をこちらで紹介させていただきます。
どなたかの役に立てばなーと思います。
ソースコード
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