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. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

  2. JavaScript

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

  3. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  4. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

  5. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  6. Simply Modal Box

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP