日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年2月27日金曜日

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.ウーパのコンピュータ備忘録


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


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






関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...