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

2023/08/09 06:51

このQ&Aのポイント

検索フォームを自動で実行させたい
"prototype.jsでYouTubeをインクリメンタルサーチ"というタイトルのページにて、入力フォームにワードを打ち込むとそのワードのyoutube動画を検索表示させる、という内容の記事がありまして、そちらのサンプルソースを試してみました。
入力フォームにvalue="animal"として、検索ページが表示されると自動でanimalの検索結果を表示させたいと思ったです。

ベストアンサー

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

2009/11/15 20:03

お世話になります。 "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(){ ○○○();}というものを使えばできるような感じでしたが、どうにもうまく動きません。もしご教授頂けるという方がいらっしゃったら是非お願いしたいです。宜しくお願いいたします。

atsuya192
お礼率39% (29/74)

JavaScript
回答数4
ありがとう数1

みんなの回答 （4）
専門家の回答

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

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2009/11/16 21:33 回答No.2

ちなみにご提示の参考URL http://www.atmarkit.co.jp/fwcr/rensai/ajaxrecipe02/ajaxrecipe02_1.html ですが、FireFox3.5では現在動作（動画再生）しないみたいです。理由は、「live_search_controller.js」の中で $('search_results').getElementsByClassName('video').each(function(element, index) { 33 element.observe("click", youtube.controller.select); 34 }); があり、prototype.jsのgetElementsByClassNameとFirefoxの getElementsByClassNameのバッティング問題が発生するからだと思う。このサンプルに固執せず、インクリメンタルサーチとか、lightwindowはとりあえず、後回しにして、「Google YouTube Data API」　を直接使って作った方が．．．． http://code.google.com/intl/ja/apis/youtube/reference.html 又は「Google AJAX Search API」のgoogle.search.VideoSearch を使うとか http://code.google.com/intl/ja/apis/ajaxsearch/documentation/reference.html#_class_GvideoSearch

質問者

お礼 2009/12/01 18:22

サンプルや解説をご提示頂き、色々有難うございました。 Google YouTube Data APIについても色々と勉強してみました。確かにAPIを使ったほうがスムーズかなと思いました。ですがご提示頂いたサンプルも大変良いものですねぇ。これから色々とさわってみながら動作や挙動を確認したいと思いますが、とりあえず一旦質問を締め切らせてお礼ポイントを付与いたします。有難うございました。

その他の回答 (3)

yyr446
ベストアンサー率65% (870/1330)

2009/11/18 22:18 回答No.4

//17歳のエッチなJKです。まだ締め切ってなかったものでさらに追加 ※インクリメンタルサーチも実装しました。アニマルで初期検索した後、追加のキーワード文字列が入力されるたびに自動検索されていき、最初にヒットした動画が再生されます。同じく「Google AJAX Search API」のgoogle.search.VideoSearch http://code.google.com/intl/ja/apis/ajaxsearch/documentation/reference.html#_class_GvideoSearch を使ってますがユーザー定義のgoogle.search.SearchFormで制御するのでなく、google.search.SearchControlを使えばその機能がありました。 http://code.google.com/intl/ja/apis/ajaxsearch/documentation/reference.html#_class_GSearchControl （サンプルURL）参照URL (サンプルコード) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <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>Google Video Search for YouTube</title> <style type="text/css"></style> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAG93o66s6C1e8nCJDkjmJ0xSVVYxLupw9AvipHbcBrNMoQN8XSBRA6NK6XyYISfT41Z7mY_whiu7HMg"></script> <script type="text/javascript"> google.load("search", "1"); </script> <link rel="stylesheet" type="text/css" href="/jslib/shadowbox/shadowbox.css"> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="/jslib/shadowbox/shadowbox.js"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ Shadowbox.init({ language: 'ja', players: ['swf','flv'] }); //]]> </script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ //var searchControl; $(document).ready(function(){ $("#kensaku_key").val("アニマル"); var searchControl = new google.search.SearchControl(); searchControl.setTimeoutInterval(google.search.SearchControl.TIMEOUT_MEDIUM); searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET); var options = new google.search.SearcherOptions(); options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); var gVideoSearch = new google.search.VideoSearch(); searchControl.addSearcher(gVideoSearch,options); var drawOptions = new google.search.DrawOptions(); drawOptions.setInput(document.getElementById("kensaku_key")); searchControl.draw(document.getElementById("dummy"),drawOptions); searchControl.execute(); gVideoSearch.setResultSetSize(google.search.Search.LARGE_RESULTSET); gVideoSearch.setResultOrder(google.search.Search.ORDER_BY_DATE); gVideoSearch.setSearchCompleteCallback(null, function(){ $('#GoogleResult > dl,span').empty(); if(gVideoSearch.cursor.pages && gVideoSearch.cursor.pages.length > 0){ var nextguide=$(document.createElement("span")); for(var i=0;i<gVideoSearch.cursor.pages.length;i++){ var nexta =$(document.createElement("a")); nexta.attr({href:"javascript:void(0);"}); nexta.text((i+1)+"頁目"); nexta.bind("click", function(event){ event.preventDefault(); gVideoSearch.gotoPage($(this).text().substring(0,1)-1); }); nextguide.append(nexta); } nextguide.append($('<a href="'+gVideoSearch.cursor.moreResultsUrl+'" target="_blank">もっと検索</a>')); $('#GoogleResult').append(nextguide); } if(gVideoSearch.results && gVideoSearch.results.length > 0){ var result=$("<dl>"); for(var i=0;i<gVideoSearch.results.length;i++){ result.append('<dt style="clear: both;"><a href="' + gVideoSearch.results[i].url + '" target="_blank">' + gVideoSearch.results[i].title + '</a></dt>' + '<dd>' + '<img src="' + gVideoSearch.results[i].tbUrl + '" style="float:left" />' + '<div style="padding-left:130px;">' + gVideoSearch.results[i].content + '<br />' + 'VideoType:' + gVideoSearch.results[i].videoType + ' ' + gVideoSearch.results[i].tbWidth +'×'+gVideoSearch.results[i].tbHeight +'<br />' + 'Playurl:' + '<a rel="shadowbox;width=320;height=240;player=swf" '+ 'href="' + gVideoSearch.results[i].playUrl + '">' + gVideoSearch.results[i].playUrl + '</a><br />' + 'Published:' + gVideoSearch.results[i].published + ' By' + gVideoSearch.results[i].publisher +'<br />' + '</div>' + '</dd>'); } $('#GoogleResult').append(result); $('#GoogleResult > dl').css("margin-left","10px"); $('#GoogleResult > span > a').css({margin:"5px",color:"black",background:"#FFF"}); $('#GoogleResult > span > a:eq('+ gVideoSearch.cursor.currentPageIndex + ')').css("background","yellow"); $('#GoogleResult').append('<hr style="clear: both;">'); $('#GoogleResult').append(nextguide.clone(true)); // ShadowBox Setup and Play Shadowbox.clearCache(); Shadowbox.setup($("a[rel^='shadowbox']")); $("a[rel^='shadowbox']:first").click(); }else{ var result=$("<dl>無し</dl>"); $('#GoogleResult').append(result); return; } }); }); function set(key){ searchControl.execute(key); } //]]> </script> </head> <body> <div><h3>Google Video Search By Google AJAX Search API</h3> 検索キーワード：<input id="kensaku_key" type="text" size="50"> <hr style="clear:both;"/> <div id="GoogleResult">（検索結果）<br /> </div> </div> <div id="dummy" style="display:none"></div> </body> </html> さらに補足--- 「GSvideoSearchControl」 http://www.google.com/uds/solutions/videosearch/reference.html を使えば、自分でごちゃごちゃDOM操作しなくても、すんなり出来ます。

yyr446
ベストアンサー率65% (870/1330)

2009/11/18 18:59 回答No.3

No2回答者です。「Google AJAX Search API」のgoogle.search.VideoSearch http://code.google.com/intl/ja/apis/ajaxsearch/documentation/reference.html#_class_GvideoSearch を使って、「アニマル」を自動検索し、結果をJQUERYで成型して最初にヒットした画像を自動再生するサンプルを作ってみました。ご参考になればと.. ※prototype.jsやめてJQUERYにしました（個人的な好み） http://docs.jquery.com/Main_Page ※動画の再生には「prototype.js」+「lightwindow」の組み合わせでなく「Shadowbox」を使いました。 http://www.shadowbox-js.com/index.html こっちの方が汎用性が高くコンフリクトしにくいです。 ※インクリメンタルサーチにはなっていません。（サンプルURL）参照サイト (サンプルソース) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <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>Google Video Search for YouTube</title> <style type="text/css"></style> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAG93o66s6C1e8nCJDkjmJ0xSVVYxLupw9AvipHbcBrNMoQN8XSBRA6NK6XyYISfT41Z7mY_whiu7HMg"></script> <script type="text/javascript"> google.load("search", "1"); </script> <link rel="stylesheet" type="text/css" href="/jslib/shadowbox/shadowbox.css"> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="/jslib/shadowbox/shadowbox.js"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ Shadowbox.init({ language: 'ja', players: ['swf','flv'] }); //]]> </script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ $(document).ready(function(){ var searchform = new google.search.SearchForm(true,document.getElementById("GoogleSearchForm")); searchform.input.value ="アニマル"; searchform.setOnSubmitCallback(null, function(searchform){ gVideoSearch.execute(searchform.input.value); return false; }); var gVideoSearch = new google.search.VideoSearch(); gVideoSearch.setResultSetSize(google.search.Search.LARGE_RESULTSET); gVideoSearch.setResultOrder(google.search.Search.ORDER_BY_DATE); gVideoSearch.setSearchCompleteCallback(null, function(){ $('#GoogleResult > dl,span').empty(); if(gVideoSearch.cursor.pages && gVideoSearch.cursor.pages.length > 0){ var nextguide=$(document.createElement("span")); for(var i=0;i<gVideoSearch.cursor.pages.length;i++){ var nexta =$(document.createElement("a")); nexta.attr({href:"javascript:void(0);"}); nexta.text((i+1)+"頁目"); nexta.bind("click", function(event){ event.preventDefault(); gVideoSearch.gotoPage($(this).text().substring(0,1)-1); }); nextguide.append(nexta); } nextguide.append($('<a href="'+gVideoSearch.cursor.moreResultsUrl+'" target="_blank">もっと検索</a>')); $('#GoogleResult').append(nextguide); } if(gVideoSearch.results && gVideoSearch.results.length > 0){ var result=$("<dl>"); for(var i=0;i<gVideoSearch.results.length;i++){ result.append('<dt style="clear: both;"><a href="' + gVideoSearch.results[i].url + '" target="_blank">' + gVideoSearch.results[i].title + '</a></dt>' + '<dd>' + '<img src="' + gVideoSearch.results[i].tbUrl + '" style="float:left" />' + '<div style="padding-left:130px;">' + gVideoSearch.results[i].content + '<br />' + 'VideoType:' + gVideoSearch.results[i].videoType + ' ' + gVideoSearch.results[i].tbWidth +'×'+gVideoSearch.results[i].tbHeight +'<br />' + 'Playurl:' + '<a rel="shadowbox;width=320;height=240;player=swf" '+ 'href="' + gVideoSearch.results[i].playUrl + '">' + gVideoSearch.results[i].playUrl + '</a><br />' + 'Published:' + gVideoSearch.results[i].published + ' By' + gVideoSearch.results[i].publisher +'<br />' + '</div>' + '</dd>'); } $('#GoogleResult').append(result); $('#GoogleResult > dl').css("margin-left","10px"); $('#GoogleResult > span > a').css({margin:"5px",color:"black",background:"#FFF"}); $('#GoogleResult > span > a:eq('+ gVideoSearch.cursor.currentPageIndex + ')').css("background","yellow"); $('#GoogleResult').append('<hr style="clear: both;">'); $('#GoogleResult').append(nextguide.clone(true)); // ShadowBox Setup and Play Shadowbox.clearCache(); Shadowbox.setup($("a[rel^='shadowbox']")); $("a[rel^='shadowbox']:first").click(); }else{ var result=$("<dl>無し</dl>"); $('#GoogleResult').append(result); return; } }); }); //]]> </script> </head> <body> <div><h3>Google Video Search By Google AJAX Search API</h3> <div id="GoogleSearchForm" style="width:30%;"></div> <hr style="clear:both;"/> <div id="GoogleResult">（検索結果）<br /> </div> </div> </body> </html>

DOUGLAS_
ベストアンサー率74% (397/534)

2009/11/16 01:19 回答No.1

　お示しの「参考URL」を拝見すると、「MVCそれぞれの役割を確認」の図で「0.5秒が経過」すると「keyword」が変わったと判断する、というような記述があります。　従って、使用された８つの js ファイルの中から当該関数「○○○()」を見つけて、 window.onload = "document.getElementById('keyword').value='animal'; ○○○()"; とでも記述すればよさそうですが、その関数を見つけることはちょっと面倒です。　また、＞「keyword」が変わったと判断させるためには、「animal」とは別の keyword を予め書き込む必要がありますが、その間のタイマー処理をすることも甚だ面倒ですし、そもそも、最初の keyword を書き込んでから「animal」を書き込むまでの間、自前関数の制御下に置かれたままになりますので、結果的に何も起こらないような気もいたします。　そこで、少々ダサいヤリカタですが、下記のようなことではいかがでしょうか？ <input type='text' name='keyword' id='keyword' onClick="value='animal'; this.select()"/> ＞入力フォームにvalue="animal"として、検索ページが表示されると＞自動でanimalの検索結果を表示させたいとのことですが、上記の場合は、空白のページが開き、検索窓をクリックしたタイミングで、検索窓に「animal」が記入され、動画が表示されます。　ただし、検索窓をクリックするたびに「animal」が記入され、動画が表示されますが．．．。