jQuery.ajaxでの絞り込み検索&ページングを実装するには?

http://s-ej.com/sample/ajax/ajax0003/
上記のように非同期通信によってデータを抽出したいと考えております。
私は、300以上のデータが入ったデータベースを利用した検索サイトを作成しているのですが、「検索するボタン」を押さないとデータベースからデータを取得してくれません。
(当たり前ですが・・・)

どうすれば、このサンプルをデータベースの利用に置き換えることが出来るのかが全く分かりません。
また、このようなデータベースを利用した絞り込み検索の仕方が掲載されております参考サイトも全く見つけることができず、もう当て上げ状態です。
どなたか、データベースを利用したajaxでの絞り込み検索を実装できる方がいましたら、参考になるサイトやアドバイスをいただけないでしょうか?

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2012/04/24 14:54:50
  • 終了:2012/05/01 14:55:05

回答(0件)

回答はまだありません

  • id:Lhankor_Mhy
    http://q.hatena.ne.jp/1334910049
    http://q.hatena.ne.jp/1335092611
  • id:sryou1985
    その人の質問を拝見させていただいたのですが、わたしの思っているのとちょっと違うような気がしました。
    例えば、最初に「200件あります。」とページ上に表示。
    で、条件を絞っていくにつれて「30件あります。」と数字を動的に変更していくこと、ページングはできるのでしょうか?

    また、http://s-ej.com/sample/ajax/ajax0003/
    このサイトだとデータが表示されている部分のソースを見ますと
    <div class="itemList"></div>
    となっており、ソースがスッキリしていますし。

  • id:Lhankor_Mhy
    できます。
     
    ・フォームのchangeイベントを拾う

    ・フォームの内容を取得

    ・検索をリクエスト

    ・検索結果を取得

    ・検索結果を表示
     
    という手順でいいのですが、どの部分で引っかかってますか?
  • id:sryou1985
    初心者なわたしに細かくアドバイスしていただき、ありがとうございます。
    質問とは離れてしまいますが、どうしてもお聞きしたいことがあります。
    私も、絞り込み検索について2.3日調べましたが、情報のほとんどが
    http://s-ej.com/sample/ajax/ajax0003/sample/sample.html
    のようなjQuery.ajaxを使用しての実装方法でした。
    Lhankor_MhyさんがおっしゃっていますJavaScriptでの絞り込みはどこにも見当たりませんでした。
    どっちが、ポピュラーな実装方法なのでしょうか?
  • id:Lhankor_Mhy
    jQueryもJavaScriptですからやることは変わらないですよ。jQueryはスクリプト言語ではなくてライブラリです。
     
    私ならjQueryを使います。楽だから。
  • id:sryou1985
    長いコードですが、よろしければ見てください。
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script>
    $(function() {
    $('input:checkbox').change(function() {
    $('#section').css('display', 'none');
    var checked = {color_id:[], category_id:[],service_id:[]};
    var c = $('input:checkbox:checked');
    if (!c.length) return;
    c.each(function(){
    var name = this.name.replace('[]','');
    var value = this.value;
    var tmp = 'input:hidden[name*="' + name + '"][value="' + value + '"]';
    checked[name].push(tmp);
    });
    checked.country_id = checked.color_id.length ? ':has(' + checked.color_id.join(',') + ')' : '';
    checked.genre_id = checked.category_id.length ? ':has(' + checked.category_id.join('+') + ')' : '';
    checked.genre_id = checked.service_id.length ? ':has(' + checked.service_id.join('+') + ')' : '';
    var ss = 'section' + checked.color_id + checked.category_id + checked.service_id;
    $(ss).css('display', 'inline')
    });
    });
    </script>
    <style>
    #listBlock01 section {
    display: none;
    }
    </style>
    >||


    or検索
    <input type="checkbox" name="color_id[]" value="1" />赤
    <input type="checkbox" name="color_id[]" value="2" />黒<br>
    and検索
    <input type="checkbox" name="category_id[]" value="1">男物
    <input type="checkbox" name="category_id[]" value="2">女物
    and検索
    <input type="checkbox" name="service_id[]" value="1">季節
    <input type="checkbox" name="service_id[]" value="2">お祝い
    <section>
    <h1>
    <img alt="〇〇" src="/img/1.jpeg"/>
    </h1>
    //以下は付属されているID
    <input type="hidden" name="color_id[]" value="2"/>
    <input type="hidden" name="category_id[]" value="1"/>
    <input type="hidden" name="category_id[]" value="2"/>
    <input type="hidden" name="service_id[]" value="1"/>
    <input type="hidden" name="service_id[]" value="2"/>
    </section>

    <section>
    <h1>
    <img alt="〇〇" src="/img/2.jpeg"/>
    </h1>
    //以下は付属されているID
    <input type="hidden" name="color_id[]" value="2"/>
    <input type="hidden" name="category_id[]" value="2"/>
    <input type="hidden" name="service_id[]" value="2"/>
    </section>


    <section>
    <h1>
    <img alt="〇〇" src="/img/3.jpeg"/>
    </h1>
    //以下は付属されているID
    <input type="hidden" name="color_id[]" value="2"/>
    <input type="hidden" name="category_id[]" value="1"/>
    <input type="hidden" name="service_id[]" value="1"/>
    <input type="hidden" name="service_id[]" value="2"/>
    </section>

    |<<
    1,2,3の画像はきれいに横並びです。
    と書き、「黒で男もの、季節とお祝い」を含んだ
    <img alt="〇〇" src="/img/3.jpeg"/>
    だけを表示しようとしたのですが、1、2が抜けて3番目の画像だけが表示されるうえに、1、2のデータがソース上にどうしまい歯抜けな状態で表示されてしまいます。
    本当は詰めて表示したく、ソース上からも一致しないデータを省きたいのですが、どう考えても答えが見つかりません。何かいい方法はないのでしょうか?
  • id:Lhankor_Mhy
    ajaxを使いたいのであるなら、まず検索クエリに対してJSONを返すスクリプトを書かなくてはいけません。
    このソースの例でいくと、
    /ajaxsearch.php?color_id[]=2&category_id[]=1&service_id[]=1&service_id[]=2
    というリクエストに対し、
    {'img':'3.jpeg'}
    という応答をするようなスクリプトを書いてください。
     
    次に、javascriptで
    $('input').change(function(){
    $.getJSON('/ajaxsearch.php', $('form').serializeArray(),function(){
    ...
    ...
    ...
    })
    }
    のようなスクリプトを書けばいいと思います。(コードは適当です)
  • id:sryou1985
    ありがとうございます。参考にさせていただきます!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません