人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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


●質問者: ぱんたま
●カテゴリ:ウェブ制作
○ 状態 :キャンセル
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
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で検索させるスクリプトを実行します。


ぱんたまさんのコメント
これは、バリデーションチェックでしか使えないのでは? コメントにあるアダルトサイトのような動きはできるのでしょうか?

Cherenkovさんのコメント
質問文だけ読むとバリデーション機能かなと思ったので…。 では、jquery live search form のようにググってみてはどうでしょうか。 [http://www.moongift.jp/2009/06/jquery_live_search/:title=その場で検索して結果に素早くアクセスする「jQuery Live Search」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ]

Cherenkovさんのコメント
このリンク先は適切ではなさそうですね…。 しかし原理はクエリに対して結果を返すサービスが動いていれば、change,ajaxメソッドだけで実現可能です。

ぱんたまさんのコメント
きちんと質問できていなかったです。すいません。 jQuery UI selectToUISliderプラグインには、もともとchangeイベントを発生させる仕組みがあるのかぁ〜。なるほど。 query live search formがチェックボックスでも適用できるのかチャレンジしてみます。

Cherenkovさんのコメント
formから発生するイベントに関しては [http://www.danilatos.com/event-test/ExperimentTest.html:title=Experimentation Harness] ここをみるとわかりやすいです。左にある入力欄をいじってみてください。

ぱんたまさんのコメント
http://www.kanzen21.com/actress/ のどこにchangeイベントが書かれているのでしょうか? クロームの要素の検証やソースをみましても、それらしきものは見当たりませんでした。参考にしようとしたのですが・・・。 管理人さんも活動していないようですし・・・。

Cherenkovさんのコメント
<script src="/common/js/actress.js"の中で、 >|javascript| $('select#ts, select#te').selectToUISlider({labels: 8,sliderOptions: {change:function(e,ui){getContents();}}}).hide(); ||< の部分かと。

Cherenkovさんのコメント
selectToUISliderメソッドでスライダー化(初期化)する際に、 changeプロパティからchangeイベント時のコールバック関数を設定できます。 このプラグインに関しては、sliderOptionsにjQueryUI Sliderと同じ初期化時の設定オブジェクトをぶっ込むことで互換動作するようです。 http://jqueryui.com/demos/slider/#event-change
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ