id:kyouryukun
ポイントあり100pt質問をキャンセル
ウェブ制作

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


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

回答の条件
  • 1人10回まで
  • 登録：
  • 終了：2012/04/22 16:51:56
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答（1件）

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493 

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

コメント（3件)

  • id:Lhankor_Mhy
    Lhankor_Mhy 2012/04/20 17:45:53
    フォームのchangeイベント
    ↓
    フォーム入力値を取得
    ↓
    入力値に基づいて検索を実行
    ↓
    検索結果を表示
    　
    というのをJavascriptで書けばいいんですが、どの部分が分からないですか？
  • id:kyouryukun
    ぱんたま 2012/04/20 18:23:48
    検索ボタンを押さなくても、検索結果が表示される方法です。
    アダルトサイトですが、http://www.kanzen21.com/actress/
    のような検索処理を実装したいのですが・・・。
  • id:Lhankor_Mhy
    Lhankor_Mhy 2012/04/20 19:45:15
    はい、質問文にもそう書いてありますね。
    ですから、それを実現するには
    　
    フォームのchangeイベント
    ↓
    フォーム入力値を取得
    ↓
    入力値に基づいて検索を実行
    ↓
    検索結果を表示
    　
    というのをJavascriptで書けばいいんです。
    なにか不明な部分があればその部分を解説しますから、分からない部分を教えてください。

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

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

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

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ