サイト内のデータを絞り込んでいく方法。

質問

jQuery、Ajax、PHPを使って、データを絞り込んで表示する方法を教えていただけないでしょうか？
/*or検索*/
<input type="checkbox" name="country_id[]" value="1" id="CountryId1" />日本
<input type="checkbox" name="country_id[]" value="2" id="CountrdIs2" />アメリカ
<input type="checkbox" name="country_id[]" value="3" id="CountryId3" />アジア

/*and検索*/
<input type="checkbox" name="dgenre_id[]" value="1" id="GenreId1" />アクション
<input type="checkbox" name="genre_id[]" value="2" id="GenreId2" />ドラマ
<input type="checkbox" name="genre_id[]" value="3" id="GenreId3" />ホラー

/*データ表示部分*/
<section id="movieList" class="group">
<img src="/eigazuki/img/poster/1.jpeg"/>
<img src="/eigazuki/img/poster/2.jpeg"/>
を含め１００件の画像を表示しています。
</section>

作業の流れとしては、
１００件の画像の中から、チェックボックスの(国はアメリカで、ジャンルがアクションとホラーな作品)valut値に一致した画像のみを表示。

「検索ボタンを押してから画像を表示させる処理」は出来るのですが、それをボタンを押さずにリアルタイムで行いたいのです。
2.3日考え、調べたのですが全くのお手上げです。
どなたか、アドバイスは参考になるサイトを教えていただけると幸いです。

回答No.1

fujillin · ベストアンサー

本来なら、リクエストに応じてサーバ側でデータを絞り込んで返すのが常道でしょうけれど、

＞それをボタンを押さずにリアルタイムで行いたいのです。
ということなので、ajaxで変更がある度に送信していると、無駄な送信が多数発生すると思われます。
（あるいは、○秒操作がなかったら送信するとかにするとか…）

＞１００件の画像の中から、～～
とのことなので、数が100件程度に限定できるのであれば、最初に全部読み込んでおいて、スクリプトのみで絞込みを行なうようにすれば、リアルタイムでの反応が可能かと思われます。

データの構成が不明なので具体的な処理はかけませんが、最初に全部のデータを受信して挿入（初期値は非表示）しておいて、絞込みのキーとなるinput要素が変更されたら、それに応じて対応する画像だけを表示、その他のものは非表示とするような処理にしてあげればよろしいかと。

あるいは、データはスクリプト内でデータのまま保持しておいて、リクエストに応じて、画像要素を生成してあげるというのもありそうです。

お礼

質問が曖昧でしたので、改めてご質問させていただきます。
せっかく回答してくださったのに申し訳ございません。

補足

ご回答ありがとうございます。
これからも、データは増えていくので、最終的には500以上になると思われます。
そうなると、ajaxでデータベース内のレコードを検索したほうが良いのかなと思いました。

回答No.2

tracer

どこまで分かって、どこからがわからないのですか？
javascriptやphpは、どの程度ご存知なのですか？
仮にjavascriptもphpもほとんど分からないとなると、説明も難しいですね。
おそらくご存知でないと想像できる理由は、そもそもそのデータがどこにあって、絞り込みの結果をどこから取得すればいいのかの説明がないからです。

補足

質問が曖昧でしたので、改めてご質問させていただきます。
せっかく回答してくださったのに申し訳ございません。