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.2
- 回答日時:
どこまで分かって、どこからがわからないのですか?
javascriptやphpは、どの程度ご存知なのですか?
仮にjavascriptもphpもほとんど分からないとなると、説明も難しいですね。
おそらくご存知でないと想像できる理由は、そもそもそのデータがどこにあって、絞り込みの結果をどこから取得すればいいのかの説明がないからです。
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ランキング
-
JavaScriptでtabindexの変更っ...
-
ボタンクリックした際、id末尾...
-
パソコンで動くjavascriptがス...
-
VBAでIEのHTMLタグの要素を操作...
-
SQLのmaxで求めた値を変数に代...
-
【お問い合わせフォーム】プル...
-
インラインフレームを自動更新...
-
jQueryのblockUIをformのボタン...
-
Selenium4でボタンをクリックで...
-
スライドを最後の画像で止めたい
-
jQuery3 reset()が効かない。
-
アコーディオンで多階層のメニ...
-
AjaxでJSONを受信すると、文字...
-
jQueryでloadした部分に.jsが効...
-
jquery × php × mysql 非同期で...
-
同一ページ移動時ハンバーガー...
-
Rails3でのクリックされたボタ...
-
テーブルの形式を整えるJavascript
-
サイドバー付きGoogle Mapについて
-
Jquery で on/offボタンの実装...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascriptを使ってQRコード読...
-
JavaScriptでtabindexの変更っ...
-
SQLのmaxで求めた値を変数に代...
-
パソコンで動くjavascriptがス...
-
IndexedDB を使ってファイルア...
-
Selenium Basicの件
-
ドラッグ & ドロップでのド...
-
<input>のvalue値をプルダウン...
-
HTMLタグのidにaaaという名をつ...
-
jquery.csv2table.jsに検索窓
-
プルダウン内容に応じてラジオ...
-
チェックボックスとラジオボタ...
-
javascriptの計算結果をvalue=""に
-
Javascript+PHPでのデータの受...
-
ボタンクリックした際、id末尾...
-
複数対応できるチェックボック...
-
VBAでIEのHTMLタグの要素を操作...
-
Doctrineのjoinについて
-
jQueryのclass属性削除ができま...
-
メールを送信するボタンでOutlo...
おすすめ情報