Selectopus

Powerful and easy replacement for your select controls

View on GitHub Releases

Example

Single, multiple and creation mode support

Single value mode

Multiple value mode

Create new items

Source data

Static source

Dynamically source

Ajax source

Full content customization

Change input and popup items view

Language support

English

Russian

Dynamically switch language

Options

$('select').selectopus({
    items: {},
    values: [],

    language: 'en',

    placeholder: false,

    required: false,
    multiple: false,
    allowCreate: false,

    popupHideSelected: false,
    popupSearchBar: true,
    popupSearchHideItem: true,
    popupSearchMarkItem: true,
    popupCloseAfterSelect: true,

    url: false,

    onLoad: function(selectopus, search, callback) {},
    onSearch: function(selectopus, search) {},
    onGetLabel: function(selectopus, data) {},
    onRenderItem: function(selectopus, value, label, data) {},
    onRenderPopupItem: function(selectopus, value, label, data) {}
    onCreateItem: function(selectopus, label) {}
});

Option	Type	Default	Comment
items	object	{}	Items
values	array \| object	[]	Array with list of values or object (value->label/data) with value and his label/data
language	string	en	Language
placeholder	string	false	Custom placeholder
required	bool	false	Value required
multiple	bool	false	Multiple mode
allowCreate	bool	false	Allow create new item from search
popupHideSelected	bool	false	Hide selected items from popup Only hightlite by default
popupSearchBar	bool	true	Show search bar in popup window
popupSearchHideItem	bool	true	Hide not matched items Recommend disable, if use ajax with filter on backand site
popupSearchMarkItem	bool	true	Mark match items
popupCloseAfterSelect	bool	true	Close popup after select
url	string	false	Ajax source url Link automatically concat with search word: http://example.com?text=<search>
onLoad (selectopus, search, callback)	closure		Load data from source (static or ajax) Automatically load data from static options or ajax url
onSearch (selectopus, search)	closure		Find and match search
onGetLabel (selectopus, data)	closure		Get label from item data
onRenderItem (selectopus, value, label, data)	closure		Render item
onRenderPopupItem (selectopus, value, label, data)	closure		Render popup item
onCreateItem (selectopus, label)	closure		Create item data from label

Events

$('select').on('selectopus-select', function(value) {});
$('select').on('selectopus-unselect', function(value) {});
$('select').on('selectopus-change', function() {});

Event	Comment
selectopus-select	Value selected
selectopus-unselect	Value unselected
selectopus-change	Values changed

Properties

$('select').selectopus().options;
$('select').selectopus().language;
$('select').selectopus().items;
$('select').selectopus().values;
$('select').selectopus().popup.isOpened;

Property	Comment
options	Allow view current options (read only)
language	Set/Get selectopus language
items	Set/Get items
values	Set/Get current values
popup.isOpened	Get popup visible state (read only)

Functions

$('select').selectopus().remove();
$('select').selectopus().popup.toggle();
$('select').selectopus().popup.show();
$('select').selectopus().popup.hide();
$('select').selectopus().utils.match(text, search);
$('select').selectopus().utils.mark(text, search);

Property	Comment
remove()	Remove selectopus from select element
popup.toggle()	Toggle popup visibility
popup.show()	Show popup
popup.hide()	Hide popup
utils.match(text, search)	Find "search" in "text"
utils.mark(text, search)	Return mark "text" with <mark> tag around "search"