【JavaScript】サイト内検索フォーム表示ツール
はじめに
｢サイト内検索フォーム｣を表示するJavaScriptです。
《 もくじ 》
■ ツールのサンプル
■ 使い方
■ HTMLソースコード
■ CSSソースコード
■ 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);}《 CSSで設定する要素 》
・ form#searchForm…検索フォーム全体
・ input#searchWord…文字入力フォーム
・ input#searchBtn…検索ボタン
■ 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の動きの流れ 》
① <form><input>タグ作成
② <form><input>タグ表示
③ サイトのドメイン名を取得
④ 検索フォームに入力された文字を取得
⑤ Googleの検索結果ページに転送
■【関連情報】JavaScript関連記事
このnoteには、他にも｢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）
◇ ◇ ◇
《 過去に作成したnoteの記事リスト 》
https://note.com/text_sakura/n/na2cd73291236
《 記事についてのお問い合わせ先 》
text.sakura.note@gmail.com
※ 添付ファイルが含まれるメールは受け取ることができません。
※ テキストのみでお願いいたします。