テキストボックスで入力した文字が含まれるリスト要素だけを検索して絞り込み表示させてみたい。まず検索対象となるJSONのdataオブジェクトを用意します。今回はサンプルとして検索対象をカタカナと英文字のみの単語リストとしています。
'data':[
{
'id':1,
'name':'イクイノックス（Equinox）'
},
{
'id':2,
'name':'リバティアイランド（Liberty Island）'
},
{
'id':3,
'name':'ジャスティンパレス（Justin Palace）'
},
{
'id':4,
'name':'タイトルホルダー（Titleholder）'
},
{
'id':5,
'name':'ドウデュース（Do Deuce）'
},
{
'id':6,
'name':'エフフォーリア（Efforia）'
},
{
'id':7,
'name':'パンサラッサ（Panthalassa）'
},
{
'id':8,
'name':'タスティエーラ（Tastiera）'
},
{
'id':9,
'name':'スターズオンアース（Stars on Earth）'
},
{
'id':10,
'name':'ソダシ（Sodashi）'
},
]
HTMLは検索用のテキストボックスと実際に表示するリスト要素をを用意します。
<!--↓検索ボックス-->
<input type="text" id="txtSearch" placeholder="検索キーワードを入力">
<!--↓一覧表示用リスト要素-->
<ul id="listSearch"></ul>
以下が検索用のJavaScriptのコードになります。今回のサンプルは検索対象はカタカナなので、検索テキストボックスにひらがなを入力した場合でも、カタカナが検索対象となります。また半角の英文字を入れた場合でも大文字小文字関係なく検索できるようにしています。
const txtSearch = document.getElementById('txtSearch'); //検索用テキストボックス要素
const listSearch = document.getElementById('listSearch'); //一覧のリスト要素
const datas = {JSONデータ}; //JSONデータ
let searchText = '';
let searchResult = datas;
const searchResultList = () => {
while( listSearch.firstChild ){
listSearch.removeChild( listSearch.firstChild );
}
searchResult.map((search) => {
listSearch.insertAdjacentHTML('beforeend',`<li>${search.name}</li>`);
});
}
//↓入力テキストを、英数小文字＆ひらがな→カタカナに変換
const changeKata = (str) => {
str = str.toLocaleLowerCase().replace(/[ぁ-ん]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) + 0x60);
});
return str;
}
txtSearch.addEventListener('input',function(e){
searchText = changeKata(e.target.value);
searchResult = datas.filter((data) => {
//↓検索対象の文字列を英数小文字に変換
return data.name.toLocaleLowerCase().includes(searchText);
})
searchResultList();
});
searchResultList();
実行結果
検索テキストボックスに「あ」あるいは「ア」と入れると単語に「ア」が含まれる単語のみのリストが表示されます。
検索テキストボックスに「a」あるいは「A」と入れると単語に「a」が含まれる単語のみのリストが表示されます。
今回は普通のJavaScriptで簡易的に実装したものになりますが、実装次第ではひらがな・カタカナ混在する単語、全角半角英数が混在する単語を検索する…などもできます。
