multi.js

JavaScript

検索機能がついたセレクトボックスを実装できる「multi.js」

multi.jsは検索機能がついた使いやすいユーザーフレンドリーなセレクトボックスを実装することができます。使い方やカスタマイズも簡単なほか、CSSによるスタイリングも可能です。jQuery 1.6以上を必要とします。

multi.js

デモ

デモでは、左側のボックス内に並んでいるApple、Banana、Blueberry、Cherry、Coconut……などといったフルーツの候補の中から複数のアイテムを選択できるようになっています。選択したアイテムは右側のボックス内に表示されるので、どれが選択されているのかは一目瞭然です。

また、上部には「Search fruits…」と書かれた検索ボックスも設置されています。例えば、「b」と入力すると左側のボックス内に「b」から始まるBananaとBlueberryが抽出されます。

大量のアイテムがある場合、いちいちボックス内をスクロールして探す手間が省けるので、この機能はユーザーにとってとても助かりますね。

デザインやレイアウトもシンプルでとても見やすく操作もしやすいです。

multi.jsにはオプションもいくつか用意されており、enable_search、search_placeholderという項目の設定ができます。

というわけで、検索機能を備えた複数アイテムを選択できる便利なセレクトボックスを自サイトに設置したい方は、ぜひmulti.jsをチェックしてみてください。

multi.js

関連記事

  1. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  2. Animocons

    JavaScript

    アイコンに素敵なアニメーションを実装できる「Animocons」

    Animoconsはアイコンにさまざまなアニメーションを加えることがで…

  3. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  4. jQuery LoadingOverlay

    JavaScript

    多彩なローディング画面を実装できる「jQuery LoadingOverlay」

    jQuery LoadingOverlayは、カスタマイズ性に優れた多…

  5. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  6. Sidr

    JavaScript

    横からサイドメニューが現れるjQueryプラグイン「Sidr」

    面白いjQueryプラグインがあったのでメモがてらご紹介します。Sid…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP