Omniselect

Demo

The following demo is decorated using Chosen and Bootstrap. It is however a stand-alone plugin without any further dependencies other than JQuery.

It is well suited for making queries to a database. In this example, we assume to have a person database and want to implement a search tool:

Name Contains

Height

Sex

Loves

clear filters

The plugin also provides a built-in (de-)serialization functionality. Click the following button below to generate a link that can restore the filters above, you can copy/paste it into another browser tab:

Basic Usage

The structure of an OmniSelect object is defined using HTML:

<div id="omniselect">
  <div>
    <label>label 1</label>
    [widget 1]
  </div>

  <div>
    <label>label 2</label>
    [widget 2]
  </div>

  [More selects]...
</div>

We then initialize it in Javascript pointing to that HTML element:

var omni = new OmniSelect({
  collection: '#omniselect',
});
omni.init();

The created OmniSelect object has a root select element with the labels as choice. Upon selecting one option, that option's widget appears behind the root element.

Support or Contact

In case you are having troubles using the code, or you have found a bug, or you wish to enhance the functionalities, please contact @guinny.