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で質問しましょう!
似たような質問が見つかりました
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlとcssに関する質問です
-
セレクトボックスを2つ選択して...
-
セレクトを全て選択されていな...
-
jQueryで同じクラス名のものを...
-
初心者です。gulpでコンパイル...
-
セレクトボックスを2つ設けて選...
-
二次元配列の中の各行の要素を...
-
フォームが空欄の時にフォーム...
-
変数名をどのようにつけるのが...
-
スマホ上で、左右スワイプで次...
-
コードレビューをお願いします。
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
二次元配列を使って順位をだす...
-
iOSのみダブルタップが必要
-
jsで質問です。 displayプロパ...
-
var exports = exports || {}; ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ドラッグ & ドロップでのド...
-
Javascriptを使ってQRコード読...
-
JavaScriptでtabindexの変更っ...
-
SQLのmaxで求めた値を変数に代...
-
<input>のvalue値をプルダウン...
-
Selenium Basicの件
-
struts selectbox optionsColle...
-
javascriptの計算結果をvalue=""に
-
パソコンで動くjavascriptがス...
-
リスニング問題のプログラミン...
-
【お問い合わせフォーム】プル...
-
メールを送信するボタンでOutlo...
-
IndexedDB を使ってファイルア...
-
サイト内のデータを絞り込んで...
-
jquery.csv2table.jsに検索窓
-
WebbrowserよりHTMLのValue値を...
-
inputタグ内にあるid属性の意味?
-
複数対応できるチェックボック...
-
Doctrineのjoinについて
-
チェックボックスで得た複数回...
おすすめ情報