【JavaScript】検索欄に入力した文字列にマッチした項目を表示

2023年10月23日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はデータベースを構築せずに検索機能を実装する方法をご紹介します。
このような検索して結果が出るようなものってデータベースを構築して、組んでくイメージですが、そこまでする必要がない場合にこのような実装が役立ちます。

実装例

・ネクストヒューマン株式会社
・桐生印刷株式会社
・ビヨンドソフトウェア
・上毛書店
・テレビ夕焼け株式会社
・モノリス書店
・株式会社ヒューマンスレイブ
・イディオットトライブ株式会社

試しに「書店」「株式会社」「ネクスト」「テレビ」などのワードを検索欄に入れて検索ボタンを押してください。
そうしたら、該当する項目が表示されるはずです。
結果がない場合は「NO DATA」と表示されます。

HTML例

<div class="search">
    <input type="search" id="search-text" name="search" class="searchform" placeholder="入力してください">
    <button id="searchBtn">検索</button>
</div>
<div class="search-area">
    <div class="search-result">
        <div class="search-result__hit-num"></div>
        <div id="search-result__list"></div>
    </div>
</div>
<ul id="targeArea">
    <li class="targeItem">・ネクストヒューマン株式会社</li>
    <li class="targeItem">・桐生印刷株式会社</li>
    <li class="targeItem">・ビヨンドソフトウェア</li>
    <li class="targeItem">・上毛書店</li>
    <li class="targeItem">・テレビ夕焼け株式会社</li>
    <li class="targeItem">・モノリス書店</li>
    <li class="targeItem">・株式会社ヒューマンスレイブ</li>
    <li class="targeItem">・イディオットトライブ株式会社</li>
</ul>

CSS例

#targeArea{
    display: none;
}
#search-result__list span{
    display: block;
}

JavaScript例

document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('click', function(event) {
        if (event.target.id === 'searchBtn') {
            let searchResult = [];
            let searchText = document.querySelector('#search-text').value;
            let targetText;
            let searchResultList = document.querySelector('#search-result__list');
            searchResultList.innerHTML = '';
            let noDataElement = document.querySelector('.noData');
            if (noDataElement) {
                noDataElement.remove();
            }
            let targetAreaItems = document.querySelectorAll('.targeItem');
            let resultNumber = 0;
            if (searchText !== '') {
                targetAreaItems.forEach(function(item) {
                    targetText = item.textContent;
                    if (targetText.indexOf(searchText) !== -1) {
                        searchResult.push(targetText);
                    }
                });
                for (let i = 0; i < searchResult.length; i++) {
                    let spanElement = document.createElement('span');
                    spanElement.textContent = searchResult[i];
                    searchResultList.appendChild(spanElement);
                    resultNumber = searchResultList.querySelectorAll('span').length;
                }
            }
            if (resultNumber === 0) {
                let noDataSpan = document.createElement('span');
                noDataSpan.className = 'noData';
                noDataSpan.textContent = 'NO DATA';
                document.querySelector('.search-result').appendChild(noDataSpan);
            }
        }
    });
});