HTMLだけで実現するサイト内検索ボックス

HTMLコードをコピペするだけで使えるWebサイト内検索ボックスです。 HTMLだけで完結！余計なコーディングは一切不要です！

HTMLだけで実現するサイト内検索ボックス

コード (シンプル版)
コード (リッチ版)
Google以外の検索エンジンにも対応させる
ひとこと

コード (シンプル版)

<!-- 検索ボックス -->
<div style="display:inline-flex;">
  <button type="button" title="サイト内検索" onclick="document.querySelector('#wrap-site-search').style.display=(document.querySelector('#wrap-site-search').style.display==='none')?'inline-block':'none';document.querySelector('#wrap-site-search input').focus();" style="background:transparent;cursor:pointer;border:0px solid transparent;">🔍</button>
  <div id="wrap-site-search" style="display: none;">
    <input type="text" placeholder="サイト内検索" onkeyup="if(event.keyCode===13)location.href=`https://www.google.com/search?q=site%3A${location.host}+${encodeURIComponent(event.currentTarget.value)}`">
  </div>
</div>
<!-- /検索ボックス -->

虫眼鏡をクリックすると検索入力ボックスがトグルします:

コード (リッチ版)

ちょっとリッチに jQuery + Bootstrap + Fontawesome を使用したバージョンもご用意しました。jQueryなどの外部ライブラリは各自読み込んでください。

<!-- 検索ボックス -->
<div class="form-inline">
  <button class="btn" title="サイト内検索" onclick="$('#wrap-site-search').toggleClass('d-none').find('input').focus()"><i class="fas fa-search"></i></button>
  <div id="wrap-site-search" class="form-inline d-none">
    <input type="text" class="form-control" style="padding-right:40px;" placeholder="サイト内検索" onkeyup="if(event.keyCode===13)location.href=`https://www.google.com/search?q=site%3A${location.host}+${encodeURIComponent(event.currentTarget.value)}`">
    <i class="fab fa-google text-muted" style="margin-left:-30px;"></i>
  </div>
</div>
<!-- /検索ボックス -->

虫眼鏡をクリックすると検索入力ボックスがトグルします:

Google以外の検索エンジンにも対応させる

先ほどのコードはサイト内検索の検索エンジンに Google を使っていますが、コードを少し弄るだけで他の検索エンジンにも対応させることができます。

例えば、検索エンジンを Bing に対応させたいなら、https://www.google.com/searchの部分をhttps://www.bing.com/searchに置換するだけでOKです。

ひとこと

Webシステム開発で「あまり重要ではないけど必須」みたいなこの手の機能は、極力メインのロジックからは切り離したいものです。HTMLだけで実現できるとそれも可能になり、全体的なコードも少しだけすっきりしますね。