Blogger:コード解説：検索キーワードを自動でセット - 検索ページにのみ検索ボックスを表示(display:none方式)

イントロダクション

「Blogger:検索キーワードを自動でセット - 検索ページにのみ検索ボックスを表示(display:none方式)」のソースコードについて解説します。

ソースコード解説：Blogger:検索キーワードを自動でセット - 検索ページにのみ検索ボックスを表示(display:none方式)

<form id="searchthis_searchpageonly" action="/search" method="get" style="display:none;">
<input type="text" name="q" style="width: 300px" title="検索" />
<a onclick="document.getElementById('searchthis_searchpageonly').submit();" title="このブログを検索" style="cursor: pointer;">検索！</a>
</form>

検索ボックスの入力部です。
この部分は、検索ページに検索ボックスを表示(display:none方式)と同じものです。

Blogger:コード解説：検索ページに検索ボックスを表示(display:none方式)
http://upa-pc.blogspot.com/2015/02/blogger-search-box-in-search-page-explain.html


<script type="text/javascript">
<!--
    (function () {

        // 検索ページの場合には、検索ボックスを表示する
        if (location.pathname == "/search") {
            var search_box = document.getElementById("searchthis_searchpageonly");
            search_box.style.display = "inline-block";

            // 検索キーワードを検索ボックスに設定
            var search_word = Blogger_getSearchParameter();
            if (search_word) {
                search_box.getElementsByTagName("input")[0].setAttribute("value", search_word);
            }
        }

検索ページの場合に、検索ボックスを表示し、検索キーワードがあれば、検索キーワードを検索ボックスに設定している部分です。

検索ページの場合に、検索ボックスを表示する部分は、検索ページに検索ボックスを表示(display:none方式)と同じものです。

Blogger:コード解説：検索ページに検索ボックスを表示(display:none方式)
http://upa-pc.blogspot.com/2015/02/blogger-search-box-in-search-page-explain.html

検索キーワードがあった場合には、検索ボックスを納めている form (id="searchthis_searchpageonly")から、検索キーワードを入力するテキストボックス　のinput タグ（ここでは、input タグは 1 つしかないため、form タグ内の input タグの最初の要素([0])）に対して、検索キーワードを設定しています。


        /*
        検索ページの URL に含まれる検索キーワード(q=keyword の keyword部分)を
        デコードして返します

        戻り値：
        デコードした検索キーワード
        URL に検索キーワードが含まれていない場合、null を返します
        */
        function Blogger_getSearchParameter() {

            // URL のクエリ文字列から、エンコードされた検索キーワードを取得
            var match_result = location.search.match(/[?&]q=([^&]*)/);
            if (match_result) {

                // 検索キーワードをデコードして返す
                // なお、form でデータを送信すると、単語同士を隔てる空白が + に変換されるため、
                // デコード関数でデコードする前に、+ を半角スペースに変換している
                return decodeURIComponent(match_result[1].replace(/\+/g, " "));
            }

            return null;
        }
検索ページの検索キーワードを、URLのクエリ文字列から取得するJavaScriptです。
この部分は、以下のページの JavaScript コードをそのまま持ってきています。

Blogger:検索ページの検索キーワードを、URLのクエリ文字列から取得するJavaScript - Dr.ウーパのコンピュータ備忘録

http://upa-pc.blogspot.com/2015/02/blogger-search-keyword-get-javascript-from-url.html

    })();
//-->
</script>

このコードは、これで以上です。