データを扱うテーブルなどにインクリメンタルサーチをjQueryを利用して実装する
返ってくる結果が膨大になりがちな検索結果(特に管理画面など)などでは、そこからさらにデータを絞り込みを行いたい場合もあるかと思います。毎回ページの遷移があったのではユーザーの負担になりがちです。
そこでjQueryを利用してインクリメンタルサーチを実装する方法をメモもかねて紹介します。
Safari独自実装のinput type=”search”のような検索窓を実装する
先日、iPhone風のテキストボックスの文字を消去するボタンを実装するチュートリアルを書いたのですが、どうやらSafariの独自実装でinput type=”search”というのがあるんですね。全然知らなかった…じゃあいっそのことplaceholderも付けてinput type=”search”っぽくしてみようということで、delval.jsをちょちょっと変えてinput type=”search”ぽい検索窓を実装してみます。これもかなり簡単にできるので、じゃあチュートリアル…？？
左が今回作ったサンプルで、右がSafari独自実装のinput type=”search”。そっくり！
サンプル – サンプルの下にあるINPUTをSafariで見ると…！
サンプルファイルのダウンロード
jQueryを使ってNews Tickerプラグインを作ってみよう[後編]
前編でニュースティッカーができたので 後編ではjQueryプラグインにしてみましょう。
jQueryを使ってNews Tickerプラグインを作ってみよう[前編]
jQueryプラグインのメリットは
- 要素をjQueryのメソッドチェーンで繋いで実行できる
- オプション項目の指定が簡単にできる
といったところでしょうか。
jQueryを使ってNews Tickerプラグインを作ってみよう[前編][2]
前回までのおさらい。
まずは前回最後のサンプルを見てください。
サンプルを見ればわかるように
ニュースティッカーの実装まではできましたが不具合があるようです。
- 最後のニュースが表示された後に何も表示されない
よくあるパターンは最後が表示されると最初に戻る というものです。
これを実装してみようと思います。
jQueryを使ってNews Tickerプラグインを作ってみよう[前編][1]
まずは今回つくるものをご覧ください。
jQueryプラグインでも見たことがあるような よくあるフェードで切り替えるやつです。
これを作ってみましょう。
前編では ニュースティッカーを実装するところまで
後編では 前編で作成したニュースティッカースクリプトをjQueryのプラグインにしていく予定です。
結構長いので数回に分けて投稿していきます。。。
JavaScriptとjQueryがちょっとわかる人なら理解できる…はずです。
