SQLの窓

2016年07月30日


Google サイト内検索の FORM 要素による設置

このブログの PC バージョンのページナビの右上にある検索入力です。この方法を使えば、他の特殊なキーワード文字を使った Google 検索フィールドも設置可能です。

Google の検索は現在では、『https://www.google.co.jp/search』に QueryString を渡す事で容易に実現できます。これは、当然 FORM 要素で行う一般的な WEBアプリケーションの機能です。FORM に対して method を指定しないこの呼び出しは、GET コマンドとなるので、通常のリンクの呼び出しと同じになります。

accept-charset は、無くても shift_jis では正しく動作しますが、euc-jp では化けるようです。また、utf-8 にすると、Google での アドレスバーで日本語部分が日本語として表示されます

複雑な検索文字列に対応する為に、検索文字列の入力は name 属性の無い送信されないフィールドで行い、本来必要な文字列作成を onsubmit イベントの中で行って、仕様に必要な name="q" のフィールドにセットして送信します。(name="q" のフィールドは type="hidden" で非表示です)

キャラクタセット指定
<script>
function callSearch() {

	var query = document.getElementById("q").value;
	if ( query.trim() != "" ) {
		query = query + " site:logicalerror.seesaa.net";
		document.getElementById("q_submit").value = query;
		return true;
	}

	return false;
}
</script>
<form
	accept-charset="utf-8"
	action="https://www.google.co.jp/search"
	target="_blank"
	onsubmit="return callSearch()">
<input
	type="text"
	id="q"
	size="31"
	maxlength="255"> 
<input
	type="hidden"
	id="q_submit"
	name="q"> 
<input
	type="submit"
	value="検索"> 
</form>



【Googleの最新記事】
posted by lightbox at 2016-07-30 17:19 | Google | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり