検索ボタンの作り方

2021年4月26日
CSS
HTML
JavaScript

ブログに検索フォームを表示するボタンを設置したかったので作成した。

サンプル

前提

下記の関数を定義済みとする。

手順

イベントを登録するオブジェクトを定義する

検索フォームを表示・非表示にするイベントを登録するため、下記のオブジェクトを定義する。

function SwitchableSearchFormEventRegisterer() 
{
    function _register() 
    {
        const BUTTON = document.querySelector( '#search-button' );
        if ( BUTTON === null ) return;

        const SEARCH_FORM = document.querySelector( '#switchable-search-form' );
        if ( SEARCH_FORM === null ) return;

        const INPUT = document.querySelector( '#switchable-search-form .input' );
        if ( INPUT === null ) return;

        const CLOSE_AREA = document.querySelector( '#switchable-search-form .close-area' );
        if ( CLOSE_AREA === null ) return;

        const ACTIVE_CLASS_NAME = 'active';
        isOpening = false;

        const onOpen = function() 
        {
            if ( isOpening ) return;
            isOpening = true;

            SEARCH_FORM.addClass( ACTIVE_CLASS_NAME );
        };

        const onClose = function() 
        {
            if ( !isOpening ) return;
            isOpening = false;

            SEARCH_FORM.removeClass( ACTIVE_CLASS_NAME );
        };

        BUTTON.registerOnPushed( onOpen );
        CLOSE_AREA.registerOnPushed( onClose );
    }

    return {
        register: _register,
    };
};

検索ボタンを配置する

検索ボタンを設置したい箇所に下記のHTMLを記述する。

<div id="search-button">「検索」を表示</div>

検索フォームと閉じる領域を配置する

検索フォームと閉じる領域を設置するため、body要素の直下に下記のHTMLを記述する。

<div id="switchable-search-form">
    <section class="search">
        <form class="form" role="search" method="get" action="http://test.com">
            <input class="input" type="text" name="s">
            <button class="submit" type="submit">検索</button>
        </form>
    </section>
    <div class="close-area"></div>
</div>

オブジェクトを生成し、register関数を呼ぶ

SwitchableSearchFormEventRegistererオブジェクトを生成し、register関数をDOMContentLoadedイベント内で呼び出す。

document.addEventListener( 'DOMContentLoaded', function() {
    const EVENT_REGISTERER = new SwitchableSearchFormEventRegisterer;
    EVENT_REGISTERER.register();
} );

検索フォームと閉じる領域の表示・非表示を切り替え可能にする

検索フォームと閉じる領域の表示・非表示を切り替え可能にするため、下記のCSSを記述する。

#switchable-search-form > .search {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
}

#switchable-search-form > .close-area {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}

#switchable-search-form.active > .search {
    visibility: visible;
    opacity: 1.0;
}

#switchable-search-form.active > .close-area {
    visibility: visible;
    opacity: 0.6;
}

見た目を整える

HTMLの各要素に付いているIDとクラスを用いて、CSSで見た目を整える。

#switchable-search-form {
    width: 100%;
}

#switchable-search-form > .search {
    position: fixed;
    top: calc( 50% - 25px);
    width: 70%;
    z-index: 2;
    margin: 0 15%;
    width: 70%;
}

#switchable-search-form > .search > .form {
    display: flex;
}

#switchable-search-form > .search > .form > .input {
    width: calc( 100% - 50px);
    height: 50px;
    border: none;
    padding: 0 10px;
    font-size: 1.125rem;
    outline: none;
}

#switchable-search-form > .search > .form > .submit {
    border: none;
    background-color: #fefefe;
    width: 50px;
    height: 50px;
    outline: none;
    border-left: solid 1px #ddd;
    cursor: pointer;
}

#switchable-search-form > .close-area {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}