<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> <!-- var site = new Array(); site[0] = ["Excite", "http://www.excite.co.jp/search.gw", "search", ["target", "combined"], ["c", "web"], ["lk", "excite_jp"], ["lang", "jp"]]; site[1] = ["Fresheye", "http://search.fresheye.com/", "kw"]; site[2] = ["Goo", "http://search.goo.ne.jp/web.jsp", "MT", ["from", "USR"], ["IE", "sjis"]]; site[3] = ["Google", "http://www.google.com/search", "q", ["hl", "ja"], ["ie", "Shift_JIS"]]; site[4] = ["Infoseek", "http://www.infoseek.co.jp/Titles", "qt", ["sv", "JP"], ["lk", "noframes"], ["rt", "JG"], ["svx", "500"]]; site[5] = ["Yahoo", "http://search.yahoo.co.jp/bin/search", "p"]; window.onload = function() { if (!document.createElement) return; if (document.all && !window.clipboardData && !window.opera) return; // 検索サイトのリストを生成 var select = document.createElement("select"); select.id = "addlist"; for (var i = 0; i < site.length; i++) { var opt = document.createElement("option"); opt.value = i; var str = document.createTextNode(site[i][0]); opt.appendChild(str); select.appendChild(opt); } // デフォルトで選択状態にする場合はその配列番号を option[n] に指定 // select.options[3].selected = true; // 既存の検索フォームにこのドロップダウンを追加 var obj = document.forms[0]; obj.elements[obj.elements.length - 1].value = "検索"; obj.insertBefore(select, obj.elements[1]); // フォームが送信された時に selectSearch() を呼び出す obj.onsubmit = selectSearch; } function selectSearch() { var str = document.forms[0].p.value; // 入力された検索文字 var num = document.forms[0].addlist.value; // 選択されたリストの番号 // 選択された検索サイトのフォーム生成(送信先の指定) var setform = document.createElement("form"); setform.action = site[num][1]; setform.method = "GET"; // setform.target = "_blank"; // 検索結果を新しいウィンドウに表示する場合に追加 // 検索文字クエリ var query = document.createElement("input"); query.type = "hidden"; query.name = site[num][2]; query.value = str; setform.appendChild(query); // 検索文字以外のクエリ if (site[num].length > 3) { for (var i = 3; i < site[num].length; i++) { var extra = document.createElement("input"); extra.type = "hidden"; extra.name = site[num][i][0]; extra.value = site[num][i][1]; setform.appendChild(extra); } } // 生成したフォームを文末に追加してそのフォームを送信 document.body.appendChild(setform); setform.submit(); // document.forms[document.forms.length - 1].submit(); return false; } // --> </script> </head> <body> <form action="http://search.yahoo.co.jp/bin/search" method="GET"> <input type="text" name="p" value="" size="30"> <input type="submit" value="Yahoo! 検索"> </form> </body> </html>
選択した検索サイトで検索するスクリプトです。検索サイトから提供されている検索フォームに追加して使用することも可能です。ただし、Macintosh 版の Internet Explorer では正常に表示、動作しない場合がありますので除外しています。この場合は選択できませんが通常の検索は使用できます。
初めにあらかじめ検索したいサイトの情報を配列内に定義しておきます。サイトの情報は、以下のように各値をクォーテーションで括ってカンマ[,]で区切って記述してください。
site[配列番号] = ["サイト名", "送信先の URL", "検索クエリ名", "検索文字以外のクエリの名前と値"];
まず、ページ読み込み後に createElement() を使用して検索サイトのリストを作成して既存の検索フォームに追加します。初めから選択状態にしたい場合は select.options[3].selected = true; として options にサイトの配列番号を記述したのを追加してください。
<select id="addlist"> <option value="0">Excite <option value="1">Fresheye <option value="2">Goo <option value="3">Google <option value="4">Infoseek <option value="5">Yahoo </select>
実際の動作は、フォームに検索文字を入力して検索するサイトを選択します。送信ボタン、または Enter キーにて送信する時に関数 selectSearch が呼ばれます。そして、選択されたサイトリストの番号を取得して配列番号の値を当てはめていきます。
関数 selectSearch が呼ばれた時に送信用のフォームを生成して action 値に送信先 URL が代入されます。検索文字は、name 値に検索クエリ名、value 値に入力された検索文字列を代入して生成します。また、検索文字以外のクエリがある場合はその名前と値をそれぞれ代入して生成します。
<form action="http://www.google.com/search" method="GET"> <input type="hidden" name="q" value="あいうえお"> <input type="hidden" name="hl" value="ja"> <input type="hidden" name="ie" value="Shift_JIS"> </form>
最後にここで生成されたフォームを一度ページ上に適用(このフォームは非表示 (type="hidden") なので表示はされません)して送信します。JavaScript が無効の場合は、元のフォームに指定している検索サイトで検索されます。
検索サイトから提供されている検索フォームにこのスクリプトを追加する場合は、関数 selectSearch の入力された検索文字(検索文字として送信されるテキスト部)の名前を各検索フォームの検索クエリに使用されている名前に書き換えてください。
var str = document.forms[0].search.value;
var str = document.forms[0].kw.value;
var str = document.forms[0].MT.value;
var str = document.forms[0].q.value;
var str = document.forms[0].qt.value;
var str = document.forms[0].p.value;