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. Bootstrap Show Password
  2. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

  3. BIDEO.JS

    JavaScript

    背景動画をフルスクリーンで表示させるJSライブラリ「BIDEO.JS」

    BIDEO.JSは、webページの背景にフルスクリーンで動画を表示させ…

  4. JUMBLE

    JavaScript

    テキストの色をカラフルにシャッフルさせるjQueryプラグイン「JUMBLE」

    JUMBLEというjQueryプラグインを使えば、指定したテキストの色…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり…

  6. topbar

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP