はじめに

｢サイト内検索フォーム｣を表示するJavaScriptです。

■ ツールのサンプル

【JavaScript】サイト内検索フォーム表示ツール
https://text.sakura.ne.jp/memo/tool-javascript/20221203/

■ 使い方

① JavaScriptのファイル(下記)をアップロード
② 検索フォームを表示させたい場所に【HTMLソースコード(下記)】を記述
③ 検索フォームが表示される

■ HTMLソースコード

<script id="GoogleSearchScript" src="script.js"></script>

■ CSSソースコード

form,input{margin:0;padding:0;border:0;}
form#searchForm{display:flex;width:88%;box-sizing:border-box;margin:4px auto;padding:0;border:0;border-radius:4px;box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);}form#search:focus{box-shadow:0 0 4px 2px rgb(206,206,206), 0 0 0 1px rgb(216,216,216);}form#search:focus-within{box-shadow:0 0 4px 2px rgb(206,206,206), 0 0 0 1px rgb(216,216,216);}
input#searchWord{flex:1 1 auto;width:calc(100% - 80px);box-sizing:border-box;padding:8px;border:solid 1px rgb(44,119,243);border-right:0;border-radius:4px 0 0 4px;outline:0;background-color:rgb(247,247,255);letter-spacing:0.02em;-webkit-appearance:none;}input#search-i::placeholder{color:rgb(90,90,90);}
input#searchBtn{width:80px;box-sizing:border-box;border:0;padding:8px;border-radius:0 4px 4px 0;outline:0;background-color:rgb(44,119,243);color:rgb(249,249,249);letter-spacing:0.02em;cursor:pointer;-webkit-appearance:none;}input#search-b:hover{background-color:rgb(13,95,232);}

■ JavaScriptソースコード

window.onload = function() {

// [作成] フォームタグを作成
let FormTag = document.createElement("form");
// [設定] フォームタグにid名を追加
FormTag.id = "searchForm";
// [作成] フォームタグの中身を作成
FormTag.innerHTML = `
<input type="text" id="searchWord" size="10">
<input type="button" id="searchBtn" value="検索">
`;
// [表示] フォームタグの表示場所を指定(<form>タグを<script>タグの直前に表示)
document.getElementById("GoogleSearchScript").parentNode.insertBefore(FormTag, document.getElementById("GoogleSearchScript"));
// [実行] エンターキー押した時に実行
document.getElementById("searchForm").addEventListener("submit", GoogleSearch);
// [実行] ボタンクリックした時に実行
document.getElementById("searchBtn").addEventListener("click", GoogleSearch);
// [実行] 実行内容
function GoogleSearch(event) {
event.preventDefault();
// [取得] スクリプトが設置されているサイトのドメインを取得
let SearchSite = window.location.hostname;
// [取得] フォームタグに入力された文字を取得
let SearchWord = encodeURIComponent(document.getElementById("searchWord").value);
// [転送] Google検索結果ページに移動
window.location.assign(`https://www.google.com/search?q=${SearchWord}+site:${SearchSite}`);
}

};

■【関連情報】JavaScript関連記事

【JavaScript】ソースコード内ドメイン(ホスト名)抽出ツール
https://note.com/text_sakura/n/n7dc9cf33e9ce
【JavaScript】データURIスキームにクエリ文字列を追加＆取得する方法
https://note.com/text_sakura/n/naf0fbceb94f4
【JavaScript】TinyURLでiPhoneのブクマを共有
https://note.com/text_sakura/n/naf5404d50a3f
【JavaScript】｢西暦｣を｢和暦｣に変換＆表示(例:1976年→昭和51年)
https://note.com/text_sakura/n/n4629971e7ba7
【JavaScript】文字を置換して暗号を作成(例:hello⇔khddb)
https://note.com/text_sakura/n/n727601f0ef83

#私の作品紹介 / #プログラミング初心者

（text）

◇　　◇　　◇