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. no-image

    JavaScript

    シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

    SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメ…

  2. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  3. jquery-steps

    JavaScript

    ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」

    jquery-stepsは、ステップ式のウィザードを実装することができ…

  4. Liquid Slider

    JavaScript

    タブパネル式のレスポンシブなjQueryスライダー「Liquid Slider」

    ちょっと珍しそうなスライダーを見つけたのでご紹介します。タブパネルにも…

  5. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP