- ベストアンサー
外部ファイルによる簡易検索ウィンドウ作成
- javascript, php, flashなどかなり浅めの知識しかもっておらず、困っております。
- 大分類も小分類も変動するデータなので、外部ファイルから読み込みたいと考えております。
- どのように構築するべきでしょうか？お手数ですが、ご回答よろしくお願い致します。
- yamaps
- お礼率88% (15/17)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
補足ね～。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; } } }
その他の回答 (2)
<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>
お礼
>pipi様 追加スクリプトありがとうございます。 まだ前回の解読中ですが、こちらも合わせてやらせて頂きます。 ありがとうございました。
<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 違う板をみつけてそちらに聞く
補足
ありがとうございます。 今簡単にサーバーにアップして試してみたのですが、うまく表示されず（</body></html>は付け足しました）、補足で質問したいのですが、まだプログラミングを初めたばかりなので、どこに問題があるのか分かりません。 prototype.jsのファイルがないな、というレベルなのです。 なので、一度自分でソースをじっくり解読して考えてみます。 そこで、構築法を理解できれば、あとは何とかなりそう、かなと思っております。 ありがとうございます。
お礼
>PHPで吐き出して、<a>タグでくくる この方法でやってみました。 目的のものに近づきました。 まだWeb製作に慣れてないため、思いつきませんでした。 頂いたスクリプトは、現在解読しているところです。 これが分かればもう少し本格的なところができそうです。 ありがとうございました。