AJAX Live Search

JavaScript

入力された結果を検索表示するjQueryプラグイン・PHP検索フォーム「AJAX Live Search」

AJAX Live Searchは、Google Autocomplete機能と同様に入力された結果を検索して表示するjQueryプラグイン・PHP検索フォームです。ボックス内に何かテキストを入力すると、それに合う結果を検索して表示してくれます。

AJAX Live Search

デモ

デモページには「Type to start searching …」と表示されたテキストボックスが設置されていて、ここに何か文字を打ち込むとそれに合うデータを検索してきて表示してくれます。

例えば、「a」という文字を入力してみるとたくさんの候補が出てくるのを確認できるかと思います。

デモでは候補が5件ずつ表示されるようになっていますが、左下から表示件数を変更することができます。All、5、10の3つから選択可能で、全部表示させたい場合はAllに設定すればOKです。

また、5や10を選択していて2ページ以上ある場合はその横にある左右の矢印ボタンから前後のページへ移動できます。たくさんデータが表示されても、このような機能があれば目的のデータも探しやすそうですね。

オプションもかなり豊富で、loaded_at、token、url、chche、form_anti_bot、slide_speed、type_delay、max_input、min_chars_to_search、page_ranges、page_range_default……など、さまざまな項目をセッティングできます。

オプションの他にも、カスタムイベントやカスタムトリガーも用意されています。

サポートされているブラウザは、IE 8+、Chrome、Firefox、Opera、Safari。ライセンスはMITとのこと。

AJAX Live Search

関連記事

  1. Material ScrollTop Button
  2. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

  3. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  4. JavaScript

    複数カラムをレスポンシブに対応させるjQueryプラグイン「jquery.columns」

    複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「…

  5. JavaScript

    レンガ風に要素を綺麗に並べてグリッドレイアウトが作れる「The Wookmark jQuery pl…

    Pinterestのように高さの異なる要素をレンガ風に綺麗に並べて、簡…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP