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 Pretty Dropdowns
  2. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

  3. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  4. JavaScript

    リスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」

    ちょっと面白そうだったので使ってみました。リスト化した各テキストを円を…

  5. Animate Transition
  6. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる

アーカイブ

PAGE TOP