外部ファイルによる簡易検索ウィンドウ作成

このQ&Aのポイント
  • javascript, php, flashなどかなり浅めの知識しかもっておらず、困っております。
  • 大分類も小分類も変動するデータなので、外部ファイルから読み込みたいと考えております。
  • どのように構築するべきでしょうか?お手数ですが、ご回答よろしくお願い致します。
回答を見る
  • ベストアンサー

外部ファイルによる簡易検索ウィンドウ作成

ただ今簡単な検索機能を作ろうと思っております。 javascript,php,flashなどかなり浅めの知識しかもっておらず、困っております。 概要は、 1.検索ボタンをクリック 2.検索ウィンドウが別ウィンドウで表示 3.表示された大分類一覧から任意の項目を選択 4.選択した項目に対する小分類一覧が表示 5.小分類一覧から目的の項目を選択 です。 大分類も小分類も変動するデータなので、外部ファイルから読み込みたいと考えております。 大分類が30項目ほど、小分類が合計600件ほどです。 イメージとしては、下記のサイトの住所一覧検索のような感じを考えております。 1.http://chizu-route-susumu.jp/ 2.http://map.doko.jp/ 参考サイトのようにphpなどを使用したデータベースを用いたものでな く、xmlやcsvを用いた簡易的なもので作成できればと思っております。 ページ遷移も大分類→小分類までで構いません。 外部ウィンドウでも、内部ウィンドウでもどちらでも構いません。 どのように構築するべきでしょうか? お手数ですが、ご回答よろしくお願い致します。

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

  • ベストアンサー
noname#84373
noname#84373
回答No.2

補足ね~。Ajax使いました prototype.js が一般的なのかと思って http://www.prototypejs.org/download Ajaxは適当に調べてみてください。使い慣れると便利! 裏でごちょごちょ通信してデータを得ています 必要なデータをPHPでもいいので、吐き出させます。 それをセレクトフォームなり、<a>タグでくくるなりして 表示するだけです。 最近書いたので実用で使えるかどうかわかりませんが 読み込んだデータをフォームのエレメントに 設定する関数です。 //フォームのエレメントに値を代入する function setValue( na, val ){ var objs = []; if( document.getElementById( na ).id == na ) objs[0] = document.getElementById( na ); else objs = document.getElementsByName( na ); if( !objs.length ) return; for(var i=0,mx=objs.length; i<mx; i++){ var obj = objs[i]; switch( obj.type ){ case 'text': case 'textarea': case 'button': case 'reset': case 'submit': case 'hidden': obj.value = val; break; case 'checkbox': obj.checked = (val !=0 || val==true)? true:(!val)? false :''; break; case 'radio': obj.checked = (obj.value == val); break; case 'select-one': for(var j=0,mx2=obj.options.length;j<mx2;j++) obj.options[j].selected = (obj.options[j].value == val); break; } } }

yamaps
質問者

お礼

>PHPで吐き出して、<a>タグでくくる この方法でやってみました。 目的のものに近づきました。 まだWeb製作に慣れてないため、思いつきませんでした。 頂いたスクリプトは、現在解読しているところです。 これが分かればもう少し本格的なところができそうです。 ありがとうございました。

その他の回答 (2)

noname#84373
noname#84373
回答No.3

<html> <body> <form> <input type="text" id="t1"> <input type="radio" name="sex" value="otoko">男 <input type="radio" name="sex" value="onna" >女<br> <select id="gengo"> <option value="">---</option> <option value="Javascript">Javascript</option> <option value="BASIC">BASIC</option> <option value="PHP">PHP</option> </select> <input type="checkbox" name="pro">プロ <input type="checkbox" name="car">車所有<br> </form> <script> //phpで以下のデータを得たとする var tmp="t1=yamada.taro|sex=onna|gengo=BASIC|pro=1|car=1"; var dt=tmp.split("|");//文字列を区切る for(i in dt){ var buf=dt[i].split("="); setValue( buf[0], buf[1] ); } function setValue( na, val ){ var objs = []; if( document.getElementById( na ).id == na ) objs[0] = document.getElementById( na ); else objs = document.getElementsByName( na ); if( !objs.length ) return; for(var i=0,mx=objs.length; i<mx; i++){ var obj = objs[i]; switch( obj.type ){ case 'text': case 'textarea': case 'button': case 'reset': case 'submit': case 'hidden': obj.value = val; break; case 'checkbox': obj.checked = (val !=0 || val==true)? true:(!val)? false :''; break; case 'radio': obj.checked = (obj.value == val); break; case 'select-one': for(var j=0,mx2=obj.options.length;j<mx2;j++) obj.options[j].selected = (obj.options[j].value == val); break; } } } </script>

yamaps
質問者

お礼

>pipi様 追加スクリプトありがとうございます。 まだ前回の解読中ですが、こちらも合わせてやらせて頂きます。 ありがとうございました。

noname#84373
noname#84373
回答No.1

<html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <input type="text" id="e"> <input type="button" value="検索" id="a" onClick="viewMenu()"> <form id="b" style="display:none;position:absolute;left:100px;top=100;width:300px;height:100px;border:2px outset;"> <div> 1:<select id="c" onChange="shou(this.value)"></select><br> 2:<select id="d" onChange="modoru(this.value)"></select> </div> </form> <script> function viewMenu(){ document.getElementById('b').style.display='block'; var txt=[],val=[]; var dt = CSV('test.csv').split('\n'); for(i=0,m=dt.length;i<m;i++){ var buf = dt[i].split('\t'); val.push( buf[0] ); txt.push( buf[1] ); } setSelectOption('c',txt,val,0,0); } function shou(key){ var txt=[],val=[]; var dt = CSV('test2.csv').split('\n'); for(i=0,m=dt.length;i<m;i++){ var buf = dt[i].split('\t'); if(buf[0]==key){ val.push( buf[0] ); txt.push( buf[1] ); } } setSelectOption('d',txt,val,0,0); } function modoru(val){ document.getElementById('e').value =val; document.getElementById('b').style.display='none'; } function CSV(fname){ var ret = ''; new Ajax.Request( fname+'?d='+(new Date).getTime(), { method:"get", asynchronous : false, onSuccess:function(o){ret=o.responseText;}}); return ret; } function setSelectOption(id_name ,text_array, value_array, default_value, select_value){ var o = document.getElementById( id_name ); while( o.hasChildNodes() ) o.removeChild( o.lastChild );//子ノードを削除する for(var i=0, n, mx = text_array.length; i<mx; i++){ var n = new Option( text_array[i], value_array[i],(default_value==value_array[i]),(select_value==value_array[i])); try{ o.add( n, null) } catch( ex ){ o.add( n ); } } } </script> ---------- test.csv(区切りはtab) 0 --- 1 一目でわかる 2 じっくり検討してわかる 3 ぐぐったらわかった 4 どうしようか迷う 5 もっと説明する人を待つ 6 無視する ----------- test2.csv(区切りはtab) 0 --- 1 あほかこのレベル! 1 くだらなすぎる! 1 ふ~ん。そうか 2 ふむふむ 2 見栄はって知ったかぶり 2 ためになったなぁ~ 3 世の中わからないことばかり 3 ややこしや~ 4 なんだこれ 4 さらに質問しようか? 4 愚問だったらどうしよう? 5 こいつは無視だ! 5 あ~早くだれか教えてくれ~! 6 ひたすら待つ 6 違う板をみつけてそちらに聞く

yamaps
質問者

補足

ありがとうございます。 今簡単にサーバーにアップして試してみたのですが、うまく表示されず(</body></html>は付け足しました)、補足で質問したいのですが、まだプログラミングを初めたばかりなので、どこに問題があるのか分かりません。 prototype.jsのファイルがないな、というレベルなのです。 なので、一度自分でソースをじっくり解読して考えてみます。 そこで、構築法を理解できれば、あとは何とかなりそう、かなと思っております。 ありがとうございます。

関連するQ&A

  • 外部でサイト内検索

    ホームページにサイト内検索をつけようと思い、色々調べています。 前はgoogleのサイト内検索をつけていたのですが、ページを更新してもクロールされて反映されるのにかなり時間がかかってしまいます。 そのため、googleのは外して他のを導入しようと考えて、 http://srch.jp/server.html のサービスを試してみました。 毎日深夜にクロールしてくれると書いてあったので期待したのですが、重すぎて、(たまに上手く表示されますが)安定せず、ほとんどエラーになり検索結果を表示してくれません。 フリーのCGIも考えてみましたが、サイト内検索を導入したいホームページのレンタルサーバーがCGIの設置を禁止している為、そこにCGIプログラムを置くことは不可能です。 また、それとは別にCGIの設置自由なホームページを持っているため、そこから外部設置できれば・・・とも考えましたが、外部設置が可能なサイト内検索のCGIプログラムが見つかりません。 他にサイト内検索で http://srch.jp/server.html と同じようなサービスをやっている軽い所。 もしくはCGIで、サイト内検索を導入したいサーバーにCGIを置かなくても、外部設置すれば、可能なフリーのCGIがありましたら、教えてください。

    • ベストアンサー
    • HTML
  • 外部DBアクセスするAndroidアプリについて

    Androidアプリで、外部DBに登録されているユーザを検索→一覧画面に表示し、一覧画面に表示された詳細ボタンから詳細画面へ遷移する仕組みを作りたいと思っています。 Androidから直接DBアクセスするためにはサーバ側でポートを解放しなければならず、セキュリティ上よろしくないので、サーバにPHPプログラムを置き、DBアクセスはPHPで行いたいと思っています。 しかし、検索まではいくものの、Androidへの結果の返し方がわかりません。 どなたか方法をご存じの方いらっしゃいますでしょうか。 また、そもそもこういった外部DBにある大量データを扱うアプリの場合、全てWebviewにしてしまうのが一般的なのでしょうか?なるべくならAndroidのコンポーネントを使った画面にしたいと思っているのですが。。

  • Windows7で「ファイル検索」出来ません

    Windows7で「ファイル検索」するには「インデックス」を作成しますが、その作成の場所(D:ドライブ)も指定し「ファイルタイプ」にもチェックが入っているのですが、ファイル名で「検索」出来ません。 ちなみに「参考」にしたサイト( Windows VistaやWindows 7で検索できないファイルを検索できるようにする は http://www.koikikukan.com/archives/2010/07/02-025555.php)です。分かる方宜しくご教授下さい。

  • php 外部ファイルについて

    php初心者です。 テキスト表示でランダムリンクをしたいのですが リンク先のURLとテキストを外部ファイルにしたいのです。 現在------------------------ <?php srand((double)microtime()*1000000); $ad_list1 = file("20.txt"); $ad_key1 = array_rand($ad_list1, 2); $ad1 = $ad_list1[$ad_key1[0]]; // 表示 echo "ID=$ad1"; ?> ----------------------------- ↑このphpソースを組み入れ、外部ファイル20.txtには ----------------------------- <a href="http://domain.jp/?id=111">111</a> <a href="http://domain.jp/?id=222">222</a> <a href="http://domain.jp/?id=333">333</a> ・ ・ ------------------------------ という感じでリンク先URLを1行ずつ書いています。 テキスト表示は ID=111 という感じで表示されるようにはなったのですが phpソースの中に http://domain.jp/? までを組み込んで、外部ファイルの内容を ------------------------------ 111 222 333 ・ ・ ------------------------------ とするだけで、 表示される ID=111をクリックすると http://domain.jp/?111 のページが表示されるようにするには どうすれば良いのでしょうか。 また、そういった事は可能でしょうか。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • 検索結果の表示切替がしたい

    こんにちは。いつも参考にさせていただいております。 まったくのPHP初心者です。 会社のホームページにサイト内検索(PHP)があるのですが、それを楽天市場のように「写真付き一覧」「写真なし一覧」「ウィンドウショッピング」で切り替えがしたいと思っています。 インラインフレームにデフォルトで「写真付き一覧」(view1.php)を表示し、「写真なし一覧」(view2.php)と「ウィンドウショッピング」(view3.php)のボタンを押すと表示が切り替わるようにしたいのですが、可能でしょうか。 ご教示いただけましたら幸いです。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • 最近、検索サイト以外で検索すると、別ウィンドウで他の検索サイトが出る

    オークションなどで検索していると 検索した名前によっては、 http://www.searchscout.com/このサイトが 別ウィンドウで出ます。 そこには、検索しヒットしたサイト一覧が表示されます。 どうしてでしょうか。 何か設定しちゃったのでしょうか。

  • PHPでグリッドのような表示

    PHPとPostgresでシステムを作っています。 検索をして一覧を表示させ、一覧の一つを選択すると 選択した情報についての詳細が表示されるような ページを作りたいのですが、  フレームとJAVAScriptは使用せずに、選択した情報の詳細をスクロールさせずにいつでも見れて、 なお検索された一覧も項目列毎に揃えて(1行には複数の項目があります) PHP(HTML)で表示させるのにスマートな方法はありますでしょうか?  一覧のほうは複数コンボボックスのようにして中で スクロールさせようと考えましたが項目毎に揃える方法が思いつきません。お力を貸していただけると幸いです。

    • ベストアンサー
    • PHP
  • Internetで検索するため検索したい項目を入力する箇所について

    Internetで検索するため検索したい項目を入力する箇所ですが、今まで、過去に検索した項目の一覧が表示されていたのがいつの間にか表示されなくなりました。何かの設定の時に表示されないようにしてしまったのかもしれません。 自分では心当たりがありません。 以前のように、過去の検索した項目の一覧が表示されるようにするにはどうすればよいのでしょうか? 参考に画像を添付します。 (パソコン環境) Windows XP SP3 IE8

  • 外部ファイルに変数を格納することはできますか?

    今、手元にあるphpの書籍で変数の項目を読んでいて疑問に思ったことがあります。 外部ファイルに変数を格納し、読み込み元のファイルで出力することはできるでしょうか? 例えば、外部ファイルに次のように記載したとします。 <?php $message = "こんにちは"; ?> そして読み込み元のファイルに次のように記載したとします。 <?php echo $message; ?> この状態で2つのファイルをアップロードし、ブラウザの画面に「こんにちは」と表示されるでしょうか? できないですよね? 上記のような方法で、「こんにちは」を表示する場合、何が足りないのでしょうか?

    • ベストアンサー
    • PHP
  • as3で、外部ファイルへ書き出ししたい

    AS3で、サーバを経由させずに、ローカル間でデータの読み書きをしたいです。 保存する外部ファイルは、.txtや.xmlにしたいです。 調べてみるとFileReferenceクラスを使ってできるそうなので やってみたのですが、 外部にデータを保存する場合、外部データを読み込む場合ともに いちいちダイアログボックスが開き、 どのファイルを読み込みのか、または どんな名前で保存するのかなどを ユーザーが指定してクリックしなければなりません。 こういったことをせずに (いちいちダイアログボックスが開いてユーザー選択することをせずに)、 例えば外部xmlをローダーで読み込むときのように 自動的にあらかじめ指定したファイルを読み込んだり、 指定した名前で書き出したりといったことをしたいのですが FileReferenceクラスではできないのでしょうか? またAS3そういったことをしたい場合は、 ほかに何か方法はありますでしょうか? 特に、外部読み込みは普通にローダークラスで出来るので問題ないのですが 書き換えて上書き保存みたいなことをしたいので その部分を、ダイアログボックス表示なしで できる方法を知りたいです。 ご存知の方いらっしゃいましたら 何卒ご教授よろしくお願いいたします。

専門家に質問してみよう