jQueryで検索条件に一致するデータをリアルタイムで呼び出す方法が知りたいです。


例えば、http://www.nurse-express.jp/job/というサイトで検索する際、項目をチェックや入力していくごとに、それに一致するデータをリアルタイムで呼び出してくれるというものです。
私の理想な検索システムなのに、どういう仕組みなのかがあまり分かっていません。
jQueryのloadや非同期通信を使っているってのは、何となく分かるのですが・・・。
参考に出来るサイトなどをご存知の方や仕組みが理解できる方がいましたら、教えていただけないでしょうか?
(実は理想的な検索サイトを見つけたのですが、アダルトサイトなのでリンクが貼れませんでした)

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2012/04/20 17:20:51
  • 終了:2012/04/22 16:51:56

回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/04/20 18:30:52

jquery real time form validation

等のキーワードでGoogle検索すれば理想のサンプルやチュートリアルが書いてあるサイトが見つかります。


コメントに書かれた参考サイトでは、
Update: jQuery UI Slider from a Select Element - now with ARIA Support | Filament Group, Inc., Boston, MA
このプラグインを使っているようです。
この手のプラグイン(というかformの部品、テキスト入力欄等も)には、値を変化させたときにchangeイベントが発生するので、$('#slider').change(function(){})のようにイベントリスナーを仕掛けてAjaxで検索させるスクリプトを実行します。

他6件のコメントを見る
id:Cherenkov

<script src="/common/js/actress.js"の中で、

$('select#ts, select#te').selectToUISlider({labels: 8,sliderOptions: {change:function(e,ui){getContents();}}}).hide();

の部分かと。

2012/04/21 04:39:54
id:Cherenkov

selectToUISliderメソッドでスライダー化(初期化)する際に、
changeプロパティからchangeイベント時のコールバック関数を設定できます。

このプラグインに関しては、sliderOptionsにjQueryUI Sliderと同じ初期化時の設定オブジェクトをぶっ込むことで互換動作するようです。
http://jqueryui.com/demos/slider/#event-change

2012/04/21 04:58:06
  • id:Lhankor_Mhy
    フォームのchangeイベント

    フォーム入力値を取得

    入力値に基づいて検索を実行

    検索結果を表示
     
    というのをJavascriptで書けばいいんですが、どの部分が分からないですか?
  • id:kyouryukun
    検索ボタンを押さなくても、検索結果が表示される方法です。
    アダルトサイトですが、http://www.kanzen21.com/actress/
    のような検索処理を実装したいのですが・・・。
  • id:Lhankor_Mhy
    はい、質問文にもそう書いてありますね。
    ですから、それを実現するには
     
    フォームのchangeイベント

    フォーム入力値を取得

    入力値に基づいて検索を実行

    検索結果を表示
     
    というのをJavascriptで書けばいいんです。
    なにか不明な部分があればその部分を解説しますから、分からない部分を教えてください。

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

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

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

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