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

Question

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

_pipi_ · Accepted Answer

補足ね～。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;
}
}
}

_pipi_ · Answer

<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_ · Answer

---------- 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違う板をみつけてそちらに聞く

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

補足ね～。

<html>

<html>

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング