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"/>
を含め100件の画像を表示しています。
</section>
作業の流れとしては、
100件の画像の中から、チェックボックスの(国はアメリカで、ジャンルがアクションとホラーな作品)valut値に一致した画像のみを表示。
「検索ボタンを押してから画像を表示させる処理」は出来るのですが、それをボタンを押さずにリアルタイムで行いたいのです。
2.3日考え、調べたのですが全くのお手上げです。
どなたか、アドバイスは参考になるサイトを教えていただけると幸いです。
No.1ベストアンサー
- 回答日時:
本来なら、リクエストに応じてサーバ側でデータを絞り込んで返すのが常道でしょうけれど、
>それをボタンを押さずにリアルタイムで行いたいのです。
ということなので、ajaxで変更がある度に送信していると、無駄な送信が多数発生すると思われます。
(あるいは、○秒操作がなかったら送信するとかにするとか…)
>100件の画像の中から、~~
とのことなので、数が100件程度に限定できるのであれば、最初に全部読み込んでおいて、スクリプトのみで絞込みを行なうようにすれば、リアルタイムでの反応が可能かと思われます。
データの構成が不明なので具体的な処理はかけませんが、最初に全部のデータを受信して挿入(初期値は非表示)しておいて、絞込みのキーとなるinput要素が変更されたら、それに応じて対応する画像だけを表示、その他のものは非表示とするような処理にしてあげればよろしいかと。
あるいは、データはスクリプト内でデータのまま保持しておいて、リクエストに応じて、画像要素を生成してあげるというのもありそうです。
この回答への補足
ご回答ありがとうございます。
これからも、データは増えていくので、最終的には500以上になると思われます。
そうなると、ajaxでデータベース内のレコードを検索したほうが良いのかなと思いました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptでtabindexの変更っ...
-
javascriptでフォーム部品の参...
-
SQLのmaxで求めた値を変数に代...
-
連番タイトル名を基準にリンク...
-
[jQuery UI] sortableを使いaja...
-
要素内を常に一番下を表示させたい
-
Ajax・jQueryでGET時にIE...
-
階層別の組織図の自動作成について
-
jQueryのblockUIをformのボタン...
-
マスターページ使用時のJavascript
-
jQuery toggle() 戻るで開いた...
-
ローカルでのonreadystatechang...
-
jqueryで開閉メニューの状態をc...
-
Folder.selectDialog()について
-
.txtファイルの読み込み
-
jqueryについて、$("+dd",this)...
-
別ページのインラインフレーム...
-
Rails3でのクリックされたボタ...
-
Jcarousel 複数設置
-
AjaxでJSONを受信すると、文字...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascriptを使ってQRコード読...
-
SQLのmaxで求めた値を変数に代...
-
JavaScriptでtabindexの変更っ...
-
Selenium Basicの件
-
ドラッグ & ドロップでのド...
-
パソコンで動くjavascriptがス...
-
メールを送信するボタンでOutlo...
-
inputタグ内にあるid属性の意味?
-
IndexedDB を使ってファイルア...
-
VBAでIEのHTMLタグの要素を操作...
-
ボタンクリックした際、id末尾...
-
jquery.csv2table.jsに検索窓
-
javascriptでフォーム部品の参...
-
エレメントとは何でしょうか
-
jquerymobileで作成するアンケ...
-
javascriptの計算結果をvalue=""に
-
<input>のvalue値をプルダウン...
-
階層別の組織図の自動作成について
-
JavascriptからPHPへのAjax通信...
-
カンマ区切りのデータを配列に...
おすすめ情報