- ベストアンサー
検索表示について
- このようなプルダウン付きの検索バーを作成しています。
- この検索結果をこの検索バーの下に表示させるためにはどうすればいいでしょうか？
- <html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><meta http-equiv="Content-Script-Type" content="text/javascript"></head><body><script type="text/javascript"><!-- var site = new Array(); var target = "main"; site[0] = ["Goo", "http://search.goo.ne.jp/web.jsp", "MT", ["from", "USR"], ["IE", "sjis"]]; site[1] = ["Google", "http://www.google.com/search", "q", ["hl", "ja"], ["ie", "Shift_JIS"]]; site[2] = ["Yahoo", "http://search.yahoo.co.jp/bin/search", "p",["ei", "Shift_JIS"]]; 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 jump(){ var url = document.form.select.options[document.form.select.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } 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><br><form action="http://search.yahoo.co.jp/bin/search" method="GET"><input type="text" name="p" value="" size="50" maxlength=255 ><input type="submit" value="検索"></form></body></html>
- youthful97
- お礼率30% (4/13)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
AJAXを使わずかつ、<iframe>でなくて<frameset>でページ分割し別フレームに 検索結果ページをロードするサンプルを作ってみました。 ※<iframe>使った方がはるかに簡単ですが... ご提示のソースをほとんどそのまま流用し、ちょこっとだけ変えました。 肝は、サブミットするフォームのターゲットを自身にしてかつ、action 属性も自分にします。検索先サイトは別途親に渡します。親は子フレームの ロケーションよりパラメーターを取り出し、別途渡された検索先サイトに くっつけて、結果のフレームのロケーションにセットしてロードさせる といったまわりくどい仕組みです。もっとよい方法があるかも。 （サンプル） 親HTML ========================================== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-jis"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title>FrameTest1</title> <script type="text/javascript"> <!-- var target_site; function swap(){ if (!target_site){ var this_site = kensaku.location.href; } if (kensaku.location.href != this_site){ var parm=kensaku.location.href.split("?"); var uri= target_site + "?" + parm[1]; result.location.href = uri; kensaku.location.reload(); target_site=""; } } // --> </script> <frameset rows="20%,*" frameborder="1"> <frame name="kensaku" src="frametest21.htm" onload="swap();"> <frame name="result" src="about:blank"> </head> </html> 子HTML (frametest21.htm)========================================= <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-jis"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title>kensaku</title> <script type="text/javascript"> <!-- var site = new Array(); window.onload = function(){ var target = "main"; site[0] = ["Goo", "http://search.goo.ne.jp/web.jsp","MT", ["from", "USR"], ["IE", "sjis"]]; site[1] = ["Google","http://www.google.com/search","q", ["hl", "ja"], ["ie", "Shift_JIS"]]; site[2] = ["Yahoo", "http://search.yahoo.co.jp/bin/search","p",["ei", "Shift_JIS"]]; 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.action = location.href; //追記 parent.target_site=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); } } // 生成したフォームを文末に追加してそのフォームを送信 // 追記しました。フォームが増殖し続けるのを防止 if (document.forms.length > 1){ document.body.removeChild(document.forms[1]); } document.body.appendChild(setform); document.forms[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="50" maxlength=255 > <!-- サブミットボタンを普通のボタンにしました。 --> <input type="button" value="検索" onclick="selectSearch();"> </form> </body> </html> ※IE7.0、firefox3.5で使えました。
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問文そのままだと、#1様の回答のようにAjaxということになるのでしょうけれど… http://oshiete1.goo.ne.jp/qa5380226.html の続きと解釈してframe（iframe）利用でそのまま表示する例を… （とりあえず最低限にしているので、うまくいかないケースがあるかも） …ってよく考えたら、わざわざ作らなくても、最近のブラウザはこの手の機能を持っているんじゃないかなぁ。（DOMの生成とかは省略しています。） URIが自動変換されちゃうので変えてます。適当に修正してください。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> hr { margin:1em; } .serch input, button { margin-left:24px; } #frm0 { width:100%; height:90%; } </style> <script type="text/javascript"> function hoge() { var idx = document.getElementById('site').selectedIndex; var txt = document.getElementById('text').value; if (txt) { var site = [ 'ttp://search.goo.ne.jp/web.jsp?IE=UTF-8&MT=', 'ttp://ww.google.com/search?q=', 'ttp://search.yahoo.co.jp/bin/search?p=' ]; document.getElementById('frm0').src = site[idx] + encodeURI(txt); } } </script> </head> <body> <div class="serch"> <select id="site"> <option value="goo">goo <option value="google">google <option value="yahoo">yahoo </select> <input type="text" id="text"> <button type="button" onclick="hoge()">search</button> <div> <hr> <iframe id="frm0" frameborder="0"></iframe> </body> </html>
- imq
- ベストアンサー率72% (16/22)
検索結果をJSONPで提供されているAPIがあれば、クライアントサイド(JavaScript)で取得できます。 ちゃんと調べていませんが、それぞれユーザIDを取得する必要があるかもしれないです。 Google http://code.google.com/intl/ja/apis/ajaxsearch/ 米Yahoo! http://developer.yahoo.com/common/json.html Live Search（解説サイト） http://gihyo.jp/dev/serial/01/wl-sdk/0025?page=1 日Yahoo!も検索APIを配信しているようですが、JSONPはなく、XMLのみのようです。 http://developer.yahoo.co.jp/webapi/search/ gooは知りません。
お礼
参考にします。 ありがとうございました。