JavaScriptのライブラリの「Select」で前方一致検索させる方法についての説明です。
Select2はデフォルトでは部分一致検索されるのですが、それを前方一致に変更する方法になります。
コピペで簡単に対応出来るようにしましたので、ご参考にどうぞ!
目次
Select2はプルダウンを拡張するJavaScriptライブラリ
簡単にSelect2の説明をしておきます。
説明不要の方は次の見出しまで読み飛ばしてください。
Select2は、プルダウンを拡張するJavaScriptライブラリです。
このライブラリを入れると、プルダウンの項目に対して検索かけれるようになります。
導入方法は下記の記事がわかりやすいです。
Qiita
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JUUzJTgwJTkwSmF2YVNjcmlwdCVFMyU4MCU5MVNlbGVjdDIlRTMlODElQTclRTMlODMlOTclRTMlODMlQUIlRTMlODMlODAlRTMlODIlQTYlRTMlODMlQjMlRTMlODIlOTIlRTMlODElOEElRTMlODElOTclRTMlODIlODMlRTMlODIlOEMlRTMlODElQUIlRTMlODElOTklRTMlODIlOEIlRTMlODAlOTAlRTMlODMlQTklRTMlODIlQTQlRTMlODMlOTYlRTMlODMlQTklRTMlODMlQUElRTMlODAlOTEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWVkYWE4M2ExZDZkNjNiYjg0ZDZkZDhkYzE5MjJjYjY3&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbXRhbmFiZSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZGRmZjRhOWYxMDFlMGYzZGJlODkwMDA3OWUwZDE2NTk&blend-x=142&blend-y=491&blend-mode=normal&s=f3d9570e5ce6890b0cffd983c957ab0d)
【JavaScript】Select2でプルダウンをおしゃれにする【ライブラリ】 - Qiita
selectのプルダウンを、ちょっとおしゃれで便利にしてしまうJavaScriptのライブラリ「Select2」の紹介です。
本家:Select2 - The jQuery replacement for select boxes
....
ちなみに同じようなライブラリにChosenというライブラリもあります。
Select2の検索方式を前方一致に変更する方法
本題のSelect2の検索方式を前方一致にする方法の説明です。
サンプルソース(コピペ利用可能)
まずソースコードを。
<script>
$(function() {
$(".select2").select2({
matcher: function(params, data) {
return matchStart(params, data);
},
});
})
function matchStart(params, data) {
params.term = params.term || '';
if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
return data;
}
return false;
}
</script>
<select class="select2">
<option value=""></option>
<option value="スズキ">スズキ</option>
<option value="ヒラスズキ">ヒラスズキ</option>
<option value="タイリクスズキ">タイリクスズキ</option>
</select>
このソースコードをコピペして、optionを書き換えれば利用できます。
サンプルソースの説明
サンプルソースの説明です。
Select2を指定したタグに適応するファンクションのselect2()には、いろいろなオプションを指定できます。
そのオプションの中にmatcherがあり、matcherに自作のファンクションを指定するとマッチング処理をカスタマイズ出来ます。
今回は前方一致させたいので、matchStartという自作のファンクションに前方一致検索処理を実装して指定しています。
matcherのカスタマイズ方法は、本家でも説明されています。
あわせて読みたい
Search | Select2 - The jQuery replacement for select boxes
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results.
まとめ:select2は自由にmatcherをカスタマイズ出来る
この方法でSelect2のマッチング処理を自由にカスマイズできます。
この記事が参考なれば幸いです。
最後までお読み頂きありがとうございました。