selectize/selectize.js

Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.

selectize.js

→ Selectize is looking for new members on the maintenance team!

Selectize is an extensible jQuery-based custom <select>; UI control. It's useful for tagging, contact lists, country selectors, and so on. The goal is to provide a solid & usable experience with a clean and powerful API.

• Demos
• Changelog
• Documentation

Features

• Smart Option Searching / Ranking Options are efficiently scored and sorted on-the-fly (using sifter). Want to search for an item's title and description? No problem.
• Caret between items Order matters sometimes. Use the ← and → arrow keys to move between selected items.
• Select & delete multiple items at once Hold down option on Mac or ctrl on Windows to select more than one item to delete.
• Díåcritîçs supported Great for international environments.
• Item creation Allow users to create items on the fly (async saving is supported; the control locks until the callback is fired).
• Remote data loading For when you have thousands of options and want them provided by the server as the user types.
• Clean API & code Interface with it and make modifications easily. Pull requests are always welcome!
• Extensible Plugin API for developing custom features (uses microplugin).
• Touch Support Plays nice with iOS 5+ devices.

Dependencies

• jquery (1.7 and greater), as peer dependency
  • Note: it is installed automatically in development, or in projects using NPM 1 or 2. When using NPM from version 3 on, just a warning is thrown and the user needs to manually install an explicit version in their own project (e.g. npm install --save [email protected]).

Optional:

• jquery-ui (required by drag_drop plugin)

Installation

Selectize can be installed via NPM npm install @selectize/selectize

Installing Manually

All pre-built files needed to use Selectize can be found in the "dist" folder.

If you're looking to get started with minimal fuss, include selectize.min.js (bundles Sifter and Microplugin dependencies – also available un-minified for debugging, just remove the .min part) and css/selectize.default.css.

Selectize is available at cdnjs.

• js/
  • selectize.js — With dependencies, minus jquery
  • selectize.min.js — With dependencies, minus jquery
• scss/ — Sass source files for customization (Bootstrap 3+ compatible)
• less/ — Less source files for customization (Bootstrap 2/3 compatible)
• css/
  • selectize.css — Core styles
  • selectize.default.css — Default theme (with core styles)
  • selectize.bootstrap2.css - Bootstrap 2 theme
  • selectize.bootstrap3.css - Bootstrap 3 theme
  • selectize.bootstrap4.css - Bootstrap 4 theme
  • selectize.bootstrap5.css - Bootstrap 5 theme

Usage

$("select").selectize(options);

The available options are documented here.

Contributing

When issuing a pull request:

• please do not include/commit changes in the dist/ or lib/ folders to avoid merge conflicts. A good way to include the right files is to use git gui or git add when committing to select the files you want to add to your commit.

• please include tests with your feature so that we're not tempted to break it in the future!

Add an entry to the top of the CHANGELOG, and update the documentation in docs/ as needed. (Refactors and documentation changes don't need a changelog entry.)

Squash your commits together in one or a few complete, logical commits, with a concise and descriptive message. One commit means one feature/bugfix/thing that has changed, or a diff bringing the code one step forward to a better, working state.

Once your commit is nice and clean, and you want to discard the other changes, you can use git checkout . (that will erase changes to tracked files) and git clean [-i/--interactive] (to erase untracked files). However, be careful with those commands, as their function is to erase things/changes.

However, be careful not to add the dist/ files in your commit, as Grunt automatically regenerates the files in dist/ as the source is changed.

Tests

Please ensure all the tests pass:

npm test # defaults to ChromHeadless
BROWSERS=Firefox npm test
BROWSERS=Firefox,Chrome npm test
BROWSERS=Firefox,Chrome,Safari npm test

Local environment

To run Selectize locally:

npm start

You can then run the examples at https://loopback.website:4000/.

License

Copyright © 2013–2016 Brian Reavis & Contributors
Copyright © 2020-2022 Selectize Team & Contributors

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at: http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

selectize.js's Issues

option to append the dropdown to body instead of the element.

and postion it absolutely so that such problems of hidden dropdowns due to overflow hidden given to container is solved

Text and value both same in selectize.jquery.js

Can somebody explain why the jQuery plugin initializes selectize a text and value attribute with the same values? See here.

This is causing issues for us as our tags use one value for the tag label and another for the actual value which we send back to our server.

Surely something else should be occurring here?

Preload remote data

Currently Selectize doesn't preload any data, so when you're using a remote source and call addItem before you've manually typed anything, nothing will happen as the data hasn't loaded yet.

Obviously it'd be better to give this its own option, so you can decide if you want to preload anything or nothing.

Allow change the 'Create xxx...' string

so this is a minor feature request, I would like to have the option to change the string appears when user add a new attribute the is not in the list.
I already done this on my setup, since it's just adding (this.settings.new_string || 'Create ') where the 'Create ' is hardcoded and then give the selectize function 'new_string'

Plugin Architecture + Custom Builds

Changing the dropdown css top dynamically

I have ran into a situation where I would like to change the offset top in different scenarios.

Here is the line in question:
https://github.com/brianreavis/selectize.js/blob/master/src/selectize.js#L1484

Can you think of any way of changing this dynamically based on theme or on initialization? I tried doing a top: 10px !important; but that breaks down if you have more selected than fits on one line.

"change" event being triggered twice (mode: "single")

The value of the select element does not post to server on ajax post.

This error cause by calling function clear() in Selectize.prototype.addItem(). In clear() we call updateOriginalInput() with data = "" and then the input (select) is trigger change with val = "" so the value "" is posted to server.

When user change option in select, the change is envent is triggered twice (in clear() and addItem()).

i18n

Suport for multiple languages.

Text to create new item is hardcoded english.

Refresh in restore_on_backspace

After pressing the backspace key, the drop-down list needs to be refreshed. It shows an wrong option highlighted.

Drag and Drop of Item for reordering

It would be nice to have reordering of items with drag and drop.

Like emails in Gmail's compose box.

Required field cannot be focused

If the original element is required, Selectize will correctly copy the property. If the user doesn't fill in the field and tries to submit the form, then the browser will try to focus the field to alert the user to their error.

Selectize doesn't seem to respond to this, resulting in a console error of An invalid form control with name='input_name' is not focusable.

It seems that the browser (at least Chrome) won't (correctly) send focus to hidden elements, so really Selectize needs to remove the required property from hidden fields and respond to a focus event.

Can not select an option with value=0

I have a options (key => value) like this:

0 => option 0
1 => option 1
2 => option 2
3 => option 3

When a select has options like that, i can not select "option 0" because the data-value for "option 0" is empty

chained select like city-state

hello..
i'm a student, i'm in an internship periode and got job to develop a website.
i want to make a chained select like city-state. i use multi dimentional array from json encode to store category(id category, name) and type(id category, id type, name). if the category change, the type will change too, refer to which category selected.
can you teach me the simple javascript for steps of using onChange? i do this for few days, and still failed.

Keep original select and selectize in sync

Is there a way to keep both selects options in sync? I'm asking that because it's easier to work with the original select than with selectize select.

Original select:

var $select = $('select');

Selectize select:

var $select = $('select').selectize(options);
var selectize = $select[0].selectize;

Better onChange API

Currently onChange only returns the value of the selected item. It'd be much more useful if it returned say, the object that is used to display the item, similar to how render.item works.

Change being triggered twice

$('#user_address_state').selectize({
  onChange: function(value) {
    console.log(value);
  }
});

when I select an option, this method is called twice, one with value being empty and a second time being the correct value.

Workaround for IE9 Scrollbar Bug

http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/47c5148f-a142-4a99-9542-5f230c78cb3b/

All selectize dropdowns with a scrollbar are unfortunately subject to this bug.

LocalStorage caching

Using a remote source is great and all, but some times that data may never change, or won't for a long time. How about an option to locally cache the returned data into Local Storage if it's available and use that source rather than fetching data all of the time.

Not understanding plugin loading

The docs state that plugins.js should contain the plugin code. I copy the code from dropdown_header into plugins.js but get multiple console errors.

What is the proper structure for loading plugins.

Selectize not showing over content

I am looking into using Selectize in our application but I ran into a problem wich im not entirely sure whos fault this is...

When using a vanilla select I get:

When using a Selectize select I get:

Also in a Boostrap the Selectize box is under the content and creates a scrollbox.

I hope we can figure out what I can do to get this right I love the way Selectize works and looks =]

Can not show the dropdown in a dialog if selectize has option {dropdownParent:'body'}

I have a selectize displayed in a dialog (jquery dialog http://api.jqueryui.com/dialog/).

If i set option {dropdownParent:'body'} for the selectize, then the dropdown isn't showed.

Look at my example:
http://jsfiddle.net/uZNhm/8/

Release on NPM

It would be call to have selectize on npm, especially for those using CommonJS browser bundlers such as browserify.

Include static options when using remote source

I have a select element which contains 10 static options, when using a remote data source in load these items get overwritten.

Selectize should respect the default content of its select element.

Select input loses focus after selecting item

When selectize applied to a select input, and a selection is made (with the keyboard or mouse,) the focus is lost. This makes it a pain to tab around the form, as after you select something the focus is set to the body element. Compare this with a native select input that keeps focus on the input after it has closed.

I've hacked together a bit of code that returns the focus to the input element, however it's not great. Perhaps the best way would be to insert an invisible element to take the focus after an item is selected?

Selectize does not inherit classes from original input/select

In our grid layout we give elements span* classes, similar to that of Bootstrap. Our original select element includes one of these so that we can create a nice and neat form layout.

When you apply Selectize however to the elements, the new element doesn't include any classes or original markup. Similar to the problem in #13.

Preload Callback

A callback for when preloaded data has been fetched and added would be nice.

IE8 not working

Fix IE8 or create a list with compatible browser

Allow dropdown to open in the "up" direction (and "auto")

dropdownDirection: "auto" | "up" | "down"

(handle within positionDropdown method)

Unable to enter text in any Selectized select on iPhone 4S with Safari

SYSTEM:

iPhone 4S (iOS 6.1.3) - Safari

REPRODUCTION STEPS:

Go to your website and look at the first demo ("Tagging"): http://brianreavis.github.io/selectize.js/

If I 'click' on the select area, it highlights itself briefly (as if Safari was going to give control to it) but then nothing happens.

COMMENTS:

After going through the rest of the demos on that same page, it seems like Selectize works fine as long as no text is being entered - i.e., any of the demos where it's just acting as a normal select are okay.

Perhaps this is expected, but I figured I'd mention it just to be safe.

TravisCI

Just an idea, have you thought about using TravisCI for building the main library upon a pull request?

Removing all options

I tried to remove all options from a selectized select and couldn't find any function to help me. Is there any way?

click on scrollbar closes the suggestion-box

http://brianreavis.github.io/selectize.js/ - the last example.

try to click on the scrollbar.

Add demo that adds (x) icon to selected items, like Select2, Chosen, etc.

Related: #6

Virtual keyboard is still activated on iOS device after "onItemAdd"

I compose the item list by using a remote source. However, after I select an item, the virtual keyboard is still on.

I looked at the official demos and I found it not even activate the keyboard at all when the input is focused.

Tested on iPad mini and iPhone 4s, both iOS 6+.

Hope I did not do something wrong.

Add destroy method

A destroy method to complete remove Selectize from an element would be nifty. I'm currently cloning a div which contains three inputs, one of which is Selectized and although I'm cloning with both options of .clone as false, Selectized gets copied too.

So, I'd like to destroy it, then re-create it.

Delete

Selectize support for option group (optgroup)

Selectize should support for option group (optgroup). Currently i can not render optgroup in selectize-dropdown.

IE9 Clicking an item doesn't hide the menu

When I click an item to select it from the select dropdown, the item gets shown as selected, however the menu does not go away. It initially does, but pops back up right away. This can be seen with IE9 when going to the main example page: http://brianreavis.github.io/selectize.js/

Thanks.

Ctrl+A / Cmd+A support for selecting all items at once

Tabindex is not respected

Selectize.js doesn't respond to tabindex on a select element. As you can see in this demo.

Can't interact with Scrollbar

I'm unable to interact (drag) the scrollbar on Chrome, Safari and Firefox on my Mac (haven't been able to test other browsers yet) .. The list closes as I try to click down on the scrollbar. I suspect it's an erroneously delegated eventhandler :)

Hope this hasn't been brought up already, I did scan for something similar.

Regards, Si

Issue with events not firing when the element is hidden initially

I have an issue with the events not getting fired when the element is in a modal. Everything is created as it should but clicking on it and typing does nothing.

Add option for confirmation on item delete.

Right now it's really easy to accidentally delete items... in some cases this is great (tagging), in other cases this is bad.

Touch support - delete items?

Works great on touch devices, with one exception, there's no way to delete multiple selected items.

Unable to query original select

When you select an option with selectize it changes the original select component adding an option with the selected value

for (i = 0, n = this.items.length; i < n; i++) {
                options.push('<option value="' + htmlEntities(this.items[i]) + '" selected="selected"></option>');
            }

I think the option component should reflect exactly how the original option was (including the label) so the user can query the select component and get the label and wherever data he wants from it.

nouse param in debounce_events

in the function debounce_events where in line 77 of selectize.js / src / utils.js
there is no business of the 2nd param types, it unuse here, but it made me thought it does.

/**

• Debounce all fired events types listed in types
• while executing the provided fn.
  *
• @param {object} self
• @param {array} types
• @param {function} fn
  */
  var debounce_events = function(self, types, fn) {

Demo Page Broken

Options being displayed when input is emptied

First our setup. We have an input box which we then apply Selectize.js to. Next to the input is a dropdown which effectively changes what type data we send in the load function. Also, we have an object containing several bits of information to control what data we send and what the templates are depending on the search type.

After typing a search query the callback is sent, but the data doesn't load, until you backspace everything in the input. The output of your results will then be listed.

You can see a video of this in action, here.

Sometimes `isCmdDown` does not reset

On occasion isCmdDown stays true which means you can't enter the "A" key.
Will try and look into why

Selectize support for multi column dropdown.

This is a very helpful feature for production site.