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

Tilt.jsパララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」前のページ

スタックしながらスクロールできるエフェクト実装「Stacked Strips」次のページStacked Strips

関連記事

  1. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

  2. no-image

    JavaScript

    レスポンシブでマルチレベルに対応したナビゲーション「K-Responsive-Menu」

    K-Responsive-Menuは、レスポンシブでマルチレベルに対応…

  3. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

  4. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

  5. Simple Lightbox

最近の記事

  1. ハムエッグホットサンドとドリップコーヒー
  2. 高輪ゲートウェイ駅のスタバ
  3. 新幹線
  4. リッチモンドホテル
  5. ハーブバターチキン 石窯フィローネとドリップコーヒー

アーカイブ

PAGE TOP