Q&A
参考にしたのがこの記事だとしたら、5年前ですね。
https://www.web-officer.com/the-other/to-the-site-search-by-installing-the-google-look-alike-search-window.html
GoogleはURLクエリの仕様がよく変わるので、5年前だと上手くいかないこともあると思います。
実際に、このページのサンプルも動作しませんので、別の記事を探してみてはどうでしょうか？
前提・実現したいこと
あるサイトにGoogleのような検索窓を設置方法について掲載があり自分の理想でまたコピペで設置可能となっていたので設置していました。実現したいことは、
1.下記のソースを元に自分のサイトで検索するようにしたのですが全く動作しません。
2.検索窓の中に文字を入力したら文字の削除用のバツボタンが表示されるようにしたい。
3.i-phoneやサファリでも検索ウインドウの表示が変わらないようしたい。
HP作成初心者なものでどこをどう変更してよいのかわかりません。どなたかご教授して頂ければ助かります。尚、都合によりGoogleの持っている検索窓の設置はできなくて困っています。
発生している問題・エラーメッセージ
上記3点を動作するようにしたい。
該当のソースコード
***は自分のページのドメインです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <style> <!-- #search{ position: relative; } #keyword{ position: absolute; top: 0; left: 0; width: 155px; height: 36px; border: 1px solid #D9D9D9; font-size: 15px; color: #999; } #search_btn{ position: absolute; top: 0; left: 159px; cursor: pointer; } --> </style> <script> function search_window_flag(flag) { var text = $('#keyword').val(); if(flag == 1) { if(text == "サイト内検索") { $('#keyword').val(""); $('#keyword').css("color","black"); } } else { if(text == "") { $('#keyword').val("サイト内検索"); $('#keyword').css("color","#999"); } } } function search_submit() { var last_keyword = $('#keyword').val(); window.location.href = "https://www.google.com/search?hl=ja&hq=inurl:www.****.****.**.jp&ie=UTF-8&oe=UTF-8&filter=0&q="+last_keyword; } function enter() { $("#keyword").keypress(function(e) { if(e.which == 13) { $("#search_btn").click(); } }); } </script> </head> <body> <div id="search"> <input type="text" name="q" size="23" maxlength="200" value="サイト内検索" id="keyword" onfocus="search_window_flag(1);" onblur="search_window_flag(0);" onkeydown="enter();"> <img src="search_button.gif" alt="検索" onclick="search_submit();" id="search_btn"> </div> </body> </html>
試したこと
自分のドメインを設定した。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
Lhankor_Mhy様
迅速に教えていただきありがとうございました。感謝いたします。
Lhankor_Mhy様が言われた通りのサイトを参考にしました。
教えていただいた通りに作成してみました。
2の検索窓の削除用のバツボタンは機能しましたが検索はできませんでした。
可能であればもう少し教えていただければ助かります。
よろしくお願いいたします。
作成したソースは以下です。***は自分のページのドメインです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
<!--
#search{
position: relative;
}
#keyword{
appearance: none;
outline: none;
}
#search_btn{
position: absolute;
top: 0;
left: 159px;
cursor: pointer;
}
-->
</style>
<script>
function search_window_flag(flag) {
var text = $('#keyword').val();
if(flag == 1) {
if(text == "サイト内検索") {
$('#keyword').val("");
$('#keyword').css("color","black");
}
} else {
if(text == "") {
$('#keyword').val("サイト内検索");
$('#keyword').css("color","#999");
}
}
}
function search_submit() {
var last_keyword = $('#keyword').val();
window.location.href = `https://www.google.com/search?q=${last_keyword}+inurl:******.*****.**.**`;
}
function enter() {
$("#keyword").keypress(function(e) {
if(e.which == 13) {
$("#search_btn").click();
}
});
}
</script>
</head>
<body>
<div id="search">
<input type="search" name="q" size="23" maxlength="200" value="サイト内検索" id="keyword" onfocus="search_window_flag(1);" onblur="search_window_flag(0);" onkeydown="enter();">
<img src="search_button.gif" alt="検索" onclick="search_submit();" id="search_btn">
</div>
</body>
jQueryを読み込んでいないように見えます。
Lhankor_Mhy様
お手を煩わせて申し訳ありません。教えていただきありがとうございます。
「jQueryを読み込んでいないように見えます。」とのことですが私の浅はかな知識ではjQueryは<script>から</script>までに記述すればよいと思っています。HPの作成が初心者のハイシニアなもので誤っているところを教えて頂ければありがたいです。(やはり無理なのでしょうか？)
よろしくお願いいたします。
「jQuery のライブラリ本体を読み込んでいないのでは？」ということを言いたいのですが、伝わっていますか？
Lhankor_Mhy様
うまく動作いたしました。
ありがとうございました。
お手を煩わせて申し訳ありませんでした。感謝し致します。
回答1件
0
ベストアンサー
以下の回答はすべて全く試していませんので、上手くいかないかもしれません。
1.下記のソースを元に自分のサイトで検索するようにしたのですが全く動作しません。
こうしてみてはどうですか？
js
1// window.location.href = "https://www.google.com/search?hl=ja&hq=inurl:www.****.****.**.jp&ie=UTF-8&oe=UTF-8&filter=0&q="+last_keyword; 2 window.location.href = `https://www.google.com/search?q=${last_keyword}+inurl:teratail.com`;
2.検索窓の中に文字を入力したら文字の削除用のバツボタンが表示されるようにしたい。
こうしてみてはどうですか？
html
1 <input type="text" name="q" size="23" maxlength="200" value="サイト内検索" id="keyword" onfocus="search_window_flag(1);" onblur="search_window_flag(0);" onkeydown="enter();"> 2 <input type="search" name="q" size="23" maxlength="200" value="サイト内検索" id="keyword" onfocus="search_window_flag(1);" onblur="search_window_flag(0);" onkeydown="enter();">
3.i-phoneやサファリでも検索ウインドウの表示が変わらないようしたい。
完全に同じは難しいと思います。
とりあえず、こうしてみるとどうですか？
css
1#keyword{ 2 appearance: none; 3 outline: none; 4}
投稿2021/05/12 08:04
総合スコア36960
Lhankor_Mhy様
うまくできました。
勉強不足でお手を煩わせました。
ありがとうございました。
お役に立てたようで何よりです。
あなたの回答
tips
プレビュー
