JavaScriptで「検索フォーム」作成について

前へ 次へ
このQ&Aのポイント
  • JavaScriptを使用して、HP内に検索フォームを作成する方法を教えてください。
  • 具体的には、CSSで作られたページに検索フォームを置き、入力されたキーワードに対応するページを新しいウィンドウに表示する方法を知りたいです。
  • 色々な本やサイトを探してみましたが、詳しい作り方が見つかりませんでした。詳しい方、教えてください。
回答を見る
  • ベストアンサー

JavaScriptで「検索フォーム」作成について

HP内にJavaScriptで「検索フォーム」を作成したいのですが、本やサイト等色々探してみても、その作り方がなかなか見つかりません。もし、詳しい方がいらっしゃれば教えて下さい。 具体的には質問追記欄に記載致します 例）CSSで作られたページに検索フォームを置き、検索された対象のページが新しいウィンドウに表示される。 　　　　　　　　　　　　　　　　　　　　　　　　　　▼フォーム▼ 　　▼検索ボタン▼ (1)検索フォーム初期状態　　　　 ⇒［ここに入力してください。］ 「検索」 (2)検索フォームに「光」と入力。　 ⇒[光 　　　　　　　　　　　　　] 「検索」 (3)"「検索」"ボタンをクリック。　　⇒［光 　　　　　　　　　　　　　］ 「検索」 (4)新しいウィンドウ（name=jisyo）に 対象のページが表示される。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

APIサービスを使って自ページにjavascriptのajax通信で検索結果を表示させるのがお手軽です。便利なやつ「Google Web Search API 」 http://code.google.com/intl/ja/apis/websearch/docs/ があったんですけど、2010年10月より非推奨になったので、そのうち使えなくなりそうです。 代わるものとして、Googleでは、 「JSON/Atom Custom Search API 」 http://code.google.com/intl/ja/apis/customsearch/v1/overview.html が提供されてますので、これを使ってJSONPで組み込んではいかがでしょうか。 Yahooの方にも、Web検索のAPIが提供されています。 http://developer.yahoo.co.jp/webapi/search/websearch/v2/websearch.html ※Yahoo Web検索のoutput型式はXMLのみなので、サーバープログラムも必要かも。

dzmy2007
質問者

お礼

ご回答くださいまして有難う御座います！（＾＾） ” 「Google Web Search API 」 http://code.google.com/intl/ja/apis/websearch/docs/ ” (上)で試してみたら、お陰さまで出来ました★ 本当に有難う御座いました♪

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 検索フォームで、検索先を変えられるようにする（ホームページ作成）

    検索フォームで、検索先を変えられるようにするには・・・。 フォーム（入力欄）は１つで、その隣に、ラジオボタンで「検索サイト１」「検索サイト２」「検索サイト３」と表示し、チェックを入れ、検索をすると、その指定したサイトで検索がされるようにしたいのです よろしくお願いします。

  • JavaScriptを使ったらサーブレットの検索が出来なくなりました…

    お世話になります。 ＨＴＭＬでテキストフォームに検索条件を入力し、送信ボタンを押すと 検索するサーブレットにとんで結果をＪＳＰで表示する…という プログラムを作っています。 ＨＴＭＬ上で、テキストフォームが未入力の場合はJavaScriptで 警告ウィンドウを表示させる様に作ったのですが、テキストフォームに 検索条件を入力した時にサーブレットにとばなくなってしまいました。 検索条件を入れて送信ボタンを押してもページは変わらず、 フォーム内容はクリアされます。この時は警告は出ません。 JavaScriptのコードを削除するとちゃんと検索結果のＪＳＰにまで 処理が行われるのですが…。 参考までに、ＨＴＭＬのソースも載せておきます。 <html> <head> <title>検索画面</title> <script language="JavaScript"> <!-- function getError() { txt=document.searchForm.search.value; if (txt=="") { alert("何も入力されていません！"); } } //--> </script> </head> <body> <center> <br><br><br><br><br><br><br><br><br><br> <b><font color=Salmon size=4>検索条件を入力して下さい。</font></b><br><br> <form name="searchForm"> <form method="post" action="../kadai7/Show" > <input type="text" name="search" size="25" maxlength="10">&nbsp; <input type ="submit" value="GO!" onClick="getError()"> </form> <a href=Menu.htm>★MENUに戻る★</a><img src="HTML\poo.gif"> </center> </body> </html> どうすればちゃんと処理されるようになるのか分かりません。 宜しくお願いします。

  • javascript ページャー、検索フォーム

    javascriptについて質問です。 とある商品の一覧ページなのですが、現在JSONでデータを読み込み（JSONにそれぞれ商品名や金額のデータがあります）、「商品名」や「値段」などをdivタグに入れて1つの商品。それをfor文で回して数百の商品を一斉に表示している状態です。 この状態をにページャーを導入、具体的には商品を20ずつ表示し、「次のページヘ」のボタンを押すと21番めからの商品が現れるようにしたいのです。 また、検索フォームを付けたいのです。「金額」や「商品名」など複数の条件を入力するフォームがあり、「検索」ボタンを押すと、それらに適合する商品（ｄｉｖタグで包まれた、金額や商品名などのデータ）だけが、改めてページに表示されるようにしたいと考えています。 この2つの機能の実装方法がわからず困っております。現在手元にコードが無く、具体例を出せず申し訳ないのですが、分かる範囲でお教え頂ければ助かります。 宜しくお願い致します。

  • javascriptとフォーム

    javascriptでフォームに入力した値を別ウィンドウにプレビューとしてその内容を自動生成して表示させたいのですが、やり方を教えて下さい。 この場合、すでにフォームタグがあり、submitボタンなどが存在している過程でお願いします。 自動生成する内容はtextareaのものです。

  • javascriptで申し込みフォームを作るメリットは？

    こんにちは。まったくの初心者の質問で恐縮です。 今回は、発生した問題を解決したいというより、 問題発生にあたって、自分の無知さを感じ、 webの常識ってどうなっているのだろう？と知りたくなり、 質問させていただいた次第です。 【背景】 BROBAというコンテンツ配信サービスに申し込もうと思った。 どうやら、申し込みフォームがjavascriptで制御されているらしい。 【問題発生】 ・出て来るウインドウは、大きすぎて、タスクバーを見えないように押し込め　ないと、全体が表示できない。 ・やっと入力して、いざ申し込みボタンを押しても、 「ページが表示されません」と出てしまう。 【疑問発生】 ・出て来るウインドウが大きすぎるのは、私の使用しているモニターが 　小さく、（15インチ）製作者が動作確認したモニターが大きかった 　ためか？ ・申し込みフォームを送信した時、ページが表示されないと出るのは、 　javascriptならではの事なのか。CGIならこんな事は起こらないのか。 ・申し込みフォームなどは、CGIとかいうもので作られるのかと 　思っていたのですが、javascriptで作るメリットってあるのでしょうか。 　逆にデメリットもあるのでしょうか？ 以下は、同様にjavascriptの問い合わせフォームで、15インチモニターで 全表示できないものです。文章ではうまくご説明できませんので、 ご参考にお願い致します。 http://www.broba.cc/guide/inq.html 最終行「お問い合わせフォーム こちら からお問い合わせください。 」 の「こちら」のリンク。 何卒、宜しくお願い致します。

  • 郵便番号検索フォームにおけるJavascript 制御で質問です

    失礼します。 郵便番号検索フォームを作成しているのですが、 サーバー側の仕様で、郵便番号を入力するtextbox の name値が固定されています。 必ず「name="p01:03"」と指定しなければなりません。 問題はname値に“：”が使用されているため、Javascriptがうまく動作しません。 ※フォーム（CGI）における値の受け渡しは問題ないです。 “：”を避けて実行する方法を探していますが、 うまくいきません。指示を頂けたらと思います。 --------------------------------- HTMLページの郵便番号欄： <form name="form">・・（略）・・・ 郵便番号：<input type="text" size="15" name="p01:03" value="" /> Javascript： 実行させるとindex.cgiのpost1へ値を飛ばします。 var target = 'http://www.テスト/index.cgi?template=zip.html&post1=' + document.form.p01:03.value; エラー：オブジェクトを指定して下さい。 ---------------------------------

  • 検索フォームを自動で実行させたい

    お世話になります。 "prototype.jsでYouTubeをインクリメンタルサーチ"というタイトルのページにて、入力フォームにワードを打ち込むとそのワードのyoutube動画を検索表示させる、という内容の記事がありまして、そちらのサンプルソースを試してみました。 参考URL http://www.atmarkit.co.jp/fwcr/rensai/ajaxrecipe02/ajaxrecipe02_1.html 上記のプログラムを試してみると、HTMLページに検索フォームが設けられており、そこにワードを打ちこんでみると、該当javascriptが１文字打ち込むごとにYoutubeから検索結果を拾って、検索フォームの下スペースに動画リストとして表示してくれました。無事に動いてくれたのでこのサンプルコードに少しカスタマイズをしてみたのですが、ここで躓いてしまいました。。 入力フォームにvalue="animal"として、検索ページが表示されると自動でanimalの検索結果を表示させたいと思ったです。 ですが、実際にはフォームエリアにはanimalと表示されていますが、検索アクションがされない状態です。 私はjavascriptなど勉強中の初心者なので調べてみているのですが、これを自動で表示させるには、form部分にonChange="○○○"、javascript側にwindow.onload = function(){ ○○○();}というものを使えばできるような感じでしたが、どうにもうまく動きません。 もしご教授頂けるという方がいらっしゃったら是非お願いしたいです。宜しくお願いいたします。

  • 昔の検索フォームに戻せませんか？

    久しぶりにパソコンを開いたら、以前の検索フォームがなくなり非常に使いづらくなっていました。 以前は、yahooでも、googleでも、パソコンを開くとオープン画面が検索フォームで（画面左側に縦表示で検索フォームはありました） そこに検索したいキーワードを入れると（縦表示に）ズラ～っと検索結果が表示され、見たいものをクリックするとそのすぐ右側にクリックしたページが大きく表示されるというスタイルだったのに・・・ 今は、yahooでも、googleでも、検索フォームは画面の上部にあり（横長のフォーム）、検索ワードを入力すると、そのすぐ下に検索結果が表示され、それをクリックすると・・・別ウインドウは開かなくとも丸々１ページクリックしたページに切り替わるので、以前のように検索候補にあがったページを左画面に表示し、見たいページを右画面で見るということができなくなったので非常に不便です。他のページを見たいときも戻らないといけないし、、、 どうにかして、昔の様式に戻せないでしょうか？ 画面左端に検索フォームをおき、候補にあがったサイトは検索フォームすぐ下に 縦表示で羅列され、見たいページがあればクリックして、それを右画面に大きく表示する ひとつのページに検索結果（左画面）と見たいページ（右画面）を並べたいんです。 パソコンはWINDOWS7です。

  • Javascriptでフォーム項目を変化させたい

    タイトル通りなのですが、Javascriptを利用して『入力するフォーム項目を変化させたい』と考えています。 参考になるページを探そうと思い検索しても、javascriptを勉強しはじめて間もない私が読めるようなページにHITしなくて(検索のワード選定が出来てないかもしれませんが…)困っています。 今回したいことは、 A・B・Cというラジオボタン(チェックボックス)があり、 <input type="radio" name="select" value="patarn_a">A <input type="radio" name="select" value="patarn_b">B <input type="radio" name="select" value="patarn_c">C Aにチェックを入れるとAに対応する入力項目(例えば項目1・項目2・項目3)が記入できるようになり、Bにチェックを入れると、Bに対応する入力項目(例えば項目1・項目3・項目4)が記入できるようになり、Cにチェックを入れると、Cに対応する入力項目(例えば項目2・項目5・項目6)が記入できるようにしたい、のです。 で、送信ボタンを押した時にA・B・Cのどこにチェックが入っているのか、それからその対応項目に入力された値をデータとして送りたいのですが、どうにも方法が分かりません。 もし、お手すきの方がいらっしゃいましたら、どなたかご教授頂けないでしょうか？

  • 検索フォームから、同時に複数のサーチエンジンを検索する方法

    自分のページに検索フォームを作って、検索語を入力してボタンを押すと、同時に複数のサーチエンジンで検索を行い、結果をそれぞれ別のウィンドウを開いて（或いはフレームで）表示させる、といったことをしたいのですが、参考になるページをご存知の方は教えてください。 チェックボックスでエンジンを選ぶタイプや統合型のメタサーチのページは見つかるのですが、ボタン→同時検索、個別に結果を表示する、といったページを見つけられません…

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する