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

Last update: Dec 31, 2022

Related tags

Autocomplete select input tagging

Overview

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. It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable experience with a clean and powerful API.

• Demos
• Changelog
• Examples
• Usage Documentation
• API Documentation
• Plugin Documentation
• Browser Test Matrix

Features

• Smart Option Searching / Ranking Options are efficiently scored and sorted on-the-fly (using sifter). Want to search 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 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]).
• sifter (bundled in "standalone" build)
• microplugin (bundled in "standalone" build)

Optional:

• jquery-ui (required by drag_drop plugin)

Installation and files

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 standalone/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/
  • standalone/
    • selectize.js — With dependencies, minus jquery
  • selectize.js — Without dependencies
• scss/
  • selectize.scss — Core styles
  • selectize.default.less — Default theme
  • selectize.bootstrap3.scss - Bootstrap 3 theme
  • selectize.bootstrap4.scss - Bootstrap 4 theme
  • plugins/ — Individual plugin styles
• less/
  • selectize.less — Core styles
  • selectize.default.less — Default theme
  • selectize.bootstrap2.less — Bootstrap 2 theme
  • selectize.bootstrap3.less — Bootstrap 3 theme
  • plugins/ — Individual plugin styles
• 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

Usage

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

The available options are documented here.

IE8 Support

To support Internet Explorer 8, es5-shim must be added your page.

<!--[if lt IE 9]><script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.0.8/es5-shim.min.js"></script><![endif]-->

Custom Builds

By default, all plugins are included. To hand-pick what plugins (if any) to include, run grunt with the "--plugins" flag. After this completes, grab the files you need from the "dist" folder.

# dependencies
npm install

# build selectize
grunt --plugins=
grunt --plugins=*
grunt --plugins=remove_button,restore_on_backspace

Contributing

When issuing a pull request:

• please do not include/commit changes in the dist/ folder 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.

Tests

Please ensure all the tests pass:

npm test # phantomjs
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 in http://localhost:4000/examples/.

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.

License

Copyright © 2013–2016 Brian Reavis & Contributors
Copyright © 2020 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.

Comments

• Call for Maintainers

  I'm looking for new maintainers of Selectize. In the coming weeks/days, I'll be moving it to an organization account so other people can take care of it. The reasons behind the move (+ some other thoughts):

  1. Selectize has been a personal project of mine – it's received no sponsorship and has been a "free time" project. I've been spread thin and it's been increasingly difficult to maintain as my available time has dwindled. I've been heads-down working Natural Atlas.
  2. jQuery plugins for UI components have always been a hack. I'm really stoked by what React is doing in this space. I highly recommend checking out @JedWatson's react-select project (even cooler given the fact Jed has contributed to Selectize in the past).
  3. Lastly: open-source burnout. I work on other OSS projects and jQuery plugins seem to be the most pain afflicting. The burnout stems from a few factors:
     • Everyone has a different idea of how it should work. Different opinions and hard choices are great – but when the stream of people coming into Issues wanting you to drop everything else to make it their way is incessant, it gets old.
     • Entitlement around new features, changes, and support. See bullet 1.
     • Not enough ingenuity from users (i.e. the Stack Overflow effect). If a style is slightly off, change it for the project. If something minor is broken, fix it and make a pull request that makes obvious what the problem is, how it's solved, and ideally some tests to make sure it doesn't regress. This is an open source project, not a company's product.
     • Front-end UI has a culture around un-tested code – after all, it's hard. Regardless, pull requests with tests are extremely rare, and most pull requests come in half-baked. By "half-baked" I mean they come with unintended consequences.
     • The readme is ignored: updating the dist files in a PR has never been the right thing to do.
     • Too many middle-of-the-night support requests.

  What I'm mainly looking for in maintainer(s):

  • Attention to detail. With the myriad of browser inconsistencies when it comes to focus handling combined with wide array of use patterns, it's easy to naively introduce new issues.

  Where selectize needs some love:

  • Bugfixes
  • Finishing locking down the API.
  • The "single" select mode that mimics a normal <select> could use some UX improvement. react-select is a great example of how it can be improved.

  That said, thanks to everyone who's brought selectize to where it is now. There's lots I've learned and certainly much I could have done better. I still want selectize to succeed and will try to work on it from time to time, but it'll be less than I currently do. If you're interested in maintaining, please email me: [email protected] Thanks!

  discussion 

  opened by brianreavis 66
• Preserve custom HTML5 data attributes

  Feature request

  Preserve custom HTML5 data attributes, so that in this case data-fruit won't disappear when going from <select> to Selectize:

  http://jsfiddle.net/k44p2by6/

  enhancement pull request welcome consensus on need 

  opened by ghost 61
• Disable automatic sort

  Hi, I'm receiving a pre-ordered list (JSON) but when I loaded into the selectize control, it re-orders the list by the Id and I don't want this. How I can let selectize use the order of my JSON?

  This is the JSFiddle example: http://jsfiddle.net/LYYab/

  Thanks.

  opened by eliashdezr 43
• Disable text input on a vanilla select

  Is there any configuration option to explicitly disable text input on the control?

  I mean, not to disable the dropdown, but just disable keyboard input (and the caret blinking), something like the readonly attr for the generated text input maybe?

  enhancement 

  opened by arathael 34
• No results found message

  When user searches for something I'd like to show some help text "No items found that match your criteria" or something, is it possible by default or should I write my own selectize plugin for that ?

  Similar to this

  Actually right now I've implemented a plugin to do this, but it seems like a ugly patch. I'd rather have this built in the library instead.

  enhancement pull request welcome 

  opened by mudassir0909 33
• Listen to original select changes

  Selectize should be listening on original <select> change events and update accordingly, so if the original value is changed by other plugins Selectize would reflect the change.

  P.S. Selectize is awesome! I replaced chosen with selectize using the Bootstrap 3 theme and it looks amazing.

  bug consensus on need no-issue-activity 

  opened by heruan 27
• Is there a way to keep "empty option" (the one that is used by selectize for placeholder attribute) in dropdown?

  Hi Brian!

  First off - thank you for this great plugin!

  At the moment I'm trying to embed selectize to our project in place of most select boxes. I've faced some issues while trying this, most of them I've managed to fix using css, but the one I didn't resolve so far is mentioned in title of my issue.

  Currently once user picks any option, the only way they can clear the input I'm aware of is by pressing backspace. It seems a bit devious (user-unfriendly) to me when it comes to a non-autocomplete type dropdown, and many might never think about this possibility to clear the field value. Therefore my question: is there an existing way to keep option with value="" in my selectize dropdown (not multiple) to provide an intuitively clear way to clear input value. I believe value="" is often used in filter forms as "Any of options below".

  Thanks for your help in advance!

  opened by glock18 26
• Search remote data - not removing items from search result

  Hello, I am using selectize to query my Database. I am trying to use selectize.js as search box to retrieve JSON data from my DB. It is almost working as I want, but I old result are still showing in the dropdown + the search in looking for values in irrelevant field. I want it to look only on "ProductName" (as specified), but I see highlights also on "ProductShortDesc" My controller code is:

     [HttpPost]
      public JsonResult SearchProductSelectize(string keyword)
      {
          IEnumerable<Product> products= db.Product.Include(p=>p.Tegs).Where(p => p.ProductName.Contains(keyword)).ToList();
          List<SearchResult> result = new List<SearchResult>();
          foreach (Product p in products)
          {
              result.Add(new SearchResult()
              {
                  Id = p.Id,
                  ProductName = p.ProductName,
                  ProductShortDesc = p.ProductShortDesc,
                  Tegs = p.Tegs.Select(c => c.TegName).ToList()
              });
  
          }
  

  and the script is:

    $('#globalsearch').selectize({
      persist: false,
      valueField: 'Id',
      labelField: 'ProductName',
      searchField: ['ProductName'],
      create: false,
      render: {
          option: function (item, escape) {
              return '<div><span class="productname">' + escape(item.ProductName) + '</span><br />' +
                  '<span class="productshortdesc">' + escape(item.ProductShortDesc) + '</span></div>';
          }
      },
      score: function (search) {
          var score = this.getScoreFunction(search);
          return function (item) {
              return 1;
          };
      },
  
      load: function (query, callback) {
          if (!query.length) return callback();
          $.ajax({
              url: '/Products/SearchProduct/',
              type: 'POST',
              dataType: 'json',
              data: {
                  keyword: query,
              },
              error: function () {
                  callback();
              },
              success: function (res) {
                  console.log(res);
                  callback(res);
              }
          });
      },
  
  
  });
  
   });
  

  Do you have any idea what I am doing wrong? Thank you!

  bug 

  opened by netbka 21
• Required fields can not be focusable

  Error: An invalid form control with name=''" is not focusable. File: /examples/required.html Browsers: Chrome v40 and Chrome Canary v43 SO: Windows 7

  Ref.: #63 and #136

  Seems that the issue is back :sweat_smile:

  bug pull request welcome reproduction failed 

  opened by oswaldoacauan 21
• Set selected values in initialization

  Using the Email Contacts example here: http://brianreavis.github.io/selectize.js/#tabs

  var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
                    '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';
  
  $('#select-to').selectize({
      persist: false,
      maxItems: null,
      valueField: 'email',
      labelField: 'name',
      searchField: ['name', 'email'],
      options: [
          {email: '[email protected]', name: 'Brian Reavis'},
          {email: '[email protected]', name: 'Nikola Tesla'},
          {email: '[email protected]'}
      ],
      render: {
          item: function(item, escape) {
              return '<div>' +
                  (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
                  (item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
              '</div>';
          },
          option: function(item, escape) {
              var label = item.name || item.email;
              var caption = item.name ? item.email : null;
              return '<div>' +
                  '<span class="label">' + escape(label) + '</span>' +
                  (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
              '</div>';
          }
      },
      create: function(input) {
          if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
              return {email: input};
          }
          var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
          if (match) {
              return {
                  email : match[2],
                  name  : $.trim(match[1])
              };
          }
          alert('Invalid email address.');
          return false;
      }
  });
  

  Is there anyway way to pass in whats going to be the selected value? I can set it afterwards but that would trigger the onChange event which is not what I want.

  question 

  opened by andriijas 21
• First character remains highlighted

  If you type something into a selectize field, and then backspace it, the highlighting for the first letter remains until you type something else. This issue applies to the current master branch.

  This was originally mentioned in the comments of the related issue #1098.

  Please let me know if any more information is required. Reproducing the issue should be simple enough.

  bug 

  opened by Wardrop 19
• respect_word_boundaries: true breaks when first character of the search term is non-ASCII

  I did:

  • [x] Search for if my issue has already been submitted
  • [x] Make sure I'm reporting something precise that needs to be fixed
  • [x] Give my issue a descriptive and concise title
  • [x] Create a minimal working example on JsFiddle or Codepen (or gave a link to a demo on the Selectize docs)
  • [x] Indicate precise steps to reproduce in numbers and the result, like below

  Non-ASCII/Unicode character at the beginning of an option string cannot be looked up using search.

  Steps to reproduce:

  1. Use code from https://jsfiddle.net/w9gecnyo/4/
  2. Search for one of the two Unicode characters: "č" or "Č"

  TL;DR Define two options, like "Čápkova" and "Ečerova", and then search for "č" or "Č" with respect_word_boundaries enabled (default).

  Expected result: Only option "Čápkova" should be listed (there is a match on the first letter, i.e. word boundary).

  Actual result: Only option "Ečerova" is listed - presumably because non-ASCII character does not act as a word boundary?!

  As far as I can tell, this is caused by \b added in Sifter for respect_word_boundaries: true. This looks like problem with \b definition, so Unicode-aware word boundary detection needs some other trick.

  This attempt at regex101.com seems to confirm that:

  

  SO seems to somewhat agree with this diagnosis: https://stackoverflow.com/questions/10590098/javascript-regexp-word-boundaries-unicode-characters

  opened by spacekpe 2
• Demo Remote Source (Rotten Tomatoes) does not work

  I did:

  • [x] Search for if my issue has already been submitted
  • [x] Make sure I'm reporting something precise that needs to be fixed
  • [x] Give my issue a descriptive and concise title
  • [x] Create a minimal working example on JsFiddle or Codepen (or gave a link to a demo on the Selectize docs)
  • [x] Indicate precise steps to reproduce in numbers and the result, like below

  Demo https://selectize.dev/demos/2019/01/01/remote-source-rt/ is broken. The remote server returns:

  HTTP/2 403 Forbidden
  date: Sun, 20 Nov 2022 14:02:25 GMT
  content-type: text/xml
  content-length: 27
  x-mashery-responder: prod-j-worker-us-west-2a-04.usw2.mashery.com
  x-error-detail-header: Account Inactive
  x-mashery-error-code: ERR_403_DEVELOPER_INACTIVE
  server: Mashery Proxy
  X-Firefox-Spdy: h2
  

  Steps to reproduce:

  1. Open https://selectize.dev/demos/2019/01/01/remote-source-rt/
  2. Enter input "iron" as suggested on the web page

  Expected result: Demo does not work.

  Actual result: Well, demo works :grin:

  opened by spacekpe 0
• iOS autofill for email doesn’t work

  This demo https://selectize.dev/demos/2018/01/01/email-contacts/ on latest iOS Safari shows my email address for autofill, but it doesn’t work as expected, as the email won’t add.

  bug input component pending review 

  opened by marcomarsala 4
• bootstrap’s invalid feedback is disabled by selectize

  I did:

  • [ x] Search for if my issue has already been submitted
  • [ x] Make sure I'm reporting something precise that needs to be fixed
  • [ x] Give my issue a descriptive and concise title
  • [ ] Create a minimal working example on JsFiddle or Codepen (or gave a link to a demo on the Selectize docs)
  • [ x] Indicate precise steps to reproduce in numbers and the result, like below

  Bootstrap (4) provides an adornment to required items by way of the invalid-feedback class when the item was not filled in or set. It does not work for selectized elements.

  Steps to reproduce:

  1. Create a selectized dropdown inside a form with some items to choose from
  2. Give it the required attribute
  3. Put in an enclosing div tag with itself and an invalid-feedback div tag (per bootstrap 4)
  4. The form should be setup with class="needs-validation" novalidate
  5. Do not select any items in the selectized dropdown
  6. Attempt to submit the form

  Expected result: The invalid feedback should display and the form should not be accepted

  Actual result: The invalid feedback never even engages. Repeat the steps above without selectizing the select element and you do you get the invalid-feedback.

  pending review 

  opened by mauricev 1
• Selectize dropdown selection outside of bootstrap modal window causes the modal to close

  I did:

  • [x] Search for if my issue has already been submitted
  • [ ] Make sure I'm reporting something precise that needs to be fixed
  • [x] Give my issue a descriptive and concise title
  • [ ] Create a minimal working example on JsFiddle or Codepen (or gave a link to a demo on the Selectize docs)
  • [ ] Indicate precise steps to reproduce in numbers and the result, like below

  I am using seltectize within a modal window. The problem is, that the dropdown extend beyond the bottom of the modal. Clicking an option beyond the bottom of the modal causes the modal to close. Only solution i found so far is to make the modal static, but that is not the behaviour i want. Is there any possibility to prevent the modal click event from being fired? Or any other solution for this issue?

  Thanks a lot.

  pending review 

  opened by NashBridgesAT 2
• When there are multiple "select" up and down, the "option" is blocked by down "select"

  When "select" is designed to be arranged up and down, the down "select" will block the options of the up "select"

  Steps to reproduce:

  1.arrange the two "select" up and down 2. add some options to the up "select" 3.the down "select" will block the options of the up "select"

  Expected result: The options of up "select" should have higher z-index than the select Actual result:

  z-index of select--selectize-control--selectize-dropdown is "1" z-index of select--selectize-control is "2"

  pending review 

  opened by whyzp 4

Releases(v0.15.2)

• v0.15.2(Nov 18, 2022)

  Whats Changed

  • Removed source maps from minified assets per discussion #1913

  Full Changelog: https://github.com/selectize/selectize.js/compare/v0.15.1...v0.15.2

  Source code(tar.gz)
  Source code(zip)
  

• v0.15.1(Nov 17, 2022)

  What's Changed

  • Missing reset for select element. by @sdebacker in https://github.com/selectize/selectize.js/pull/1910
  • Adding Dynamic option groups feature by @jackbentley in https://github.com/selectize/selectize.js/pull/1912

  New Contributors

  • @jackbentley made their first contribution in https://github.com/selectize/selectize.js/pull/1226
  • @sdebacker made their first contribution in https://github.com/selectize/selectize.js/pull/1910

  Full Changelog: https://github.com/selectize/selectize.js/compare/v0.15.0...v0.15.1

  Source code(tar.gz)
  Source code(zip)
  

• v0.15.0(Nov 14, 2022)

  Breaking Changes

  • Consolidated and updated distribution files. There is no longer a standalone version, please migrate to the selectize.js or selectize.min.js in the js folder.
  • All plugins are now always included by default.
  • builds are now using gulp instead of grunt

  What's Changed

  • Several fix for consolidation by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1880
  • Multiple fix and enhancement by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1881
  • refreshItems(): add "silent" option. by @rotdrop in https://github.com/selectize/selectize.js/pull/1756
  • Fixed incorrect highlighting of options that were activated, removed and then re-added in "multiple" mode by @sustmi in https://github.com/selectize/selectize.js/pull/1420
  • Feature/dont fire change if nothing changed by @rotdrop in https://github.com/selectize/selectize.js/pull/1754
  • Selectize classes has been lost / Watch mode by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1888
  • Fix : plugin auto_position was malfunctioning with dropdownParent = 'body' by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1889
  • Moving Build System from Grunt to Gulp by @risadams in https://github.com/selectize/selectize.js/pull/1891
  • fix: position top / style for bootstrap 4/5 by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1890
  • Fix style bootstrap 4/5 | Add property setting | Fix calcul dropdown height by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1892
  • Fix #1893 by @risadams in https://github.com/selectize/selectize.js/pull/1894
  • A more performant updateOriginalInput by @risadams in https://github.com/selectize/selectize.js/pull/1895
  • Fix #1885 - Global name collision by @risadams in https://github.com/selectize/selectize.js/pull/1897
  • Fix for #1886 - rewrite import pathnames in dist output by @risadams in https://github.com/selectize/selectize.js/pull/1898
  • Open drop-down on mouse-click if openOnFocus is false and when clicking on the options. by @risadams in https://github.com/selectize/selectize.js/pull/1899
  • Ensure plugins load in a predictable order by @risadams in https://github.com/selectize/selectize.js/pull/1900
  • Fix sass 1.56 warning. by @Eric-Guo in https://github.com/selectize/selectize.js/pull/1902
  • Adding sifter's respect-word-boundary option. initial default is true by @risadams in https://github.com/selectize/selectize.js/pull/1905
  • Build(deps-dev): Bump sass from 1.56.0 to 1.56.1 by @dependabot in https://github.com/selectize/selectize.js/pull/1907
  • Build(deps-dev): Bump jshint from 2.13.5 to 2.13.6 by @dependabot in https://github.com/selectize/selectize.js/pull/1908
  • several fix and enhancements by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1906

  New Contributors

  • @sustmi made their first contribution in https://github.com/selectize/selectize.js/pull/1420

  Full Changelog: https://github.com/selectize/selectize.js/compare/v0.14.0...v0.15.0

  Source code(tar.gz)
  Source code(zip)
  

• v0.14.0(Oct 2, 2022)

  Breaking Changes

  • Removed dependency on Microplugin and Sifter.
  • These packages are now included in the default distribution.

  What's Changed

  • Update URL for Demos by @tnir in https://github.com/selectize/selectize.js/pull/1830
  • Bump jquery-ui from 1.13.1 to 1.13.2 by @dependabot in https://github.com/selectize/selectize.js/pull/1833
  • Bump sass from 1.53.0 to 1.54.0 by @dependabot in https://github.com/selectize/selectize.js/pull/1834
  • Added a throttle on mousedown preveting the dropdown from reopening after click to close by @EffakT in https://github.com/selectize/selectize.js/pull/1837
  • Bump sass from 1.54.0 to 1.54.1 by @dependabot in https://github.com/selectize/selectize.js/pull/1838
  • Bump sass from 1.54.1 to 1.54.3 by @dependabot in https://github.com/selectize/selectize.js/pull/1839
  • Bump sass from 1.54.3 to 1.54.4 by @dependabot in https://github.com/selectize/selectize.js/pull/1854
  • Avoid referencing _events property of potentially deleted this object. by @rotdrop in https://github.com/selectize/selectize.js/pull/1855
  • Bump sass from 1.54.4 to 1.54.5 by @dependabot in https://github.com/selectize/selectize.js/pull/1857
  • Bump jquery from 3.6.0 to 3.6.1 by @dependabot in https://github.com/selectize/selectize.js/pull/1859
  • Bump sass from 1.54.5 to 1.54.8 by @dependabot in https://github.com/selectize/selectize.js/pull/1861
  • Bump sass from 1.54.8 to 1.54.9 by @dependabot in https://github.com/selectize/selectize.js/pull/1862
  • Fix missing style for dropdown header plugin by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1864
  • Allow filter option for sifter by @risadams in https://github.com/selectize/selectize.js/pull/1866
  • Fix #1818 Scroll left when I click on a selectized item and page is scrolled right by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1865
  • Issue #1689, change selectize behavior to work inside modals. by @vanboom in https://github.com/selectize/selectize.js/pull/1813
  • Issue #1653 implement a minwidth setting to improve responsive situations by @vanboom in https://github.com/selectize/selectize.js/pull/1814
  • Fix dropdown open on submit when input is invalid by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1868
  • Bump karma from 6.4.0 to 6.4.1 by @dependabot in https://github.com/selectize/selectize.js/pull/1869
  • Bump actions/stale from 5 to 6 by @dependabot in https://github.com/selectize/selectize.js/pull/1873
  • Feature clear button by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1872
  • Copying from #1796 to resolve conflicts by @risadams in https://github.com/selectize/selectize.js/pull/1874
  • Feature : add 'size' option for custom dropdown height by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1875
  • Fix #1776 deprecated $.fn.blur() by @fabienwnklr in https://github.com/selectize/selectize.js/pull/1876
  • Integrate deps by @risadams in https://github.com/selectize/selectize.js/pull/1878

  New Contributors

  • @tnir made their first contribution in https://github.com/selectize/selectize.js/pull/1830
  • @EffakT made their first contribution in https://github.com/selectize/selectize.js/pull/1837
  • @fabienwnklr made their first contribution in https://github.com/selectize/selectize.js/pull/1864
  • @vanboom made their first contribution in https://github.com/selectize/selectize.js/pull/1813

  Full Changelog: https://github.com/selectize/selectize.js/compare/v0.13.6...v0.14.0

  Source code(tar.gz)
  Source code(zip)
  

• v0.13.6(Jul 9, 2022)

  What's Changed

  • Use navigator.userAgentData for platform detection when available by @mikevaux in https://github.com/selectize/selectize.js/pull/1797
  • Use correct semver syntax for JQuery peerDependency by @austinshenk in https://github.com/selectize/selectize.js/pull/1805
  • Fix bootstrap3 select-width-item-border incompatible value by @nbluis in https://github.com/selectize/selectize.js/pull/1811
  • typo fix by @Eric-Guo in https://github.com/selectize/selectize.js/pull/1817
  • fix: #1827 by @risadams in https://github.com/selectize/selectize.js/pull/1829
  • selectize.jquery.js For convenience remember the original user-settings. by @rotdrop in https://github.com/selectize/selectize.js/pull/1755

  New Contributors

  • @mikevaux made their first contribution in https://github.com/selectize/selectize.js/pull/1797
  • @austinshenk made their first contribution in https://github.com/selectize/selectize.js/pull/1805
  • @nbluis made their first contribution in https://github.com/selectize/selectize.js/pull/1811
  • @Eric-Guo made their first contribution in https://github.com/selectize/selectize.js/pull/1817

  Full Changelog: https://github.com/selectize/selectize.js/compare/v0.13.5...v0.13.6

  Source code(tar.gz)
  Source code(zip)
  

• v0.12.4(Oct 12, 2016)

  #1161 #1144 #1143

  Source code(tar.gz)
  Source code(zip)
  

• v0.12.3(Aug 24, 2016)

  • Make label[for] work after applying Selectize (#755)

  Barrett Sonntag (@barretts)

  • Output friendly error message when Microplugin is missing (#1137). Special thanks to @styxxx for proposing the improvement.
  • Add local server command grunt server.
  • Stop creating items automatically when text is pasted, only create them when pasted text contains delimiter.
  • Fix regression 'Required fields can not be focusable' in Chrome (#733)
  • Fix detection of Validity API, we had false negatives before.

  Jonathan Allard (@joallard)

  • Fix open keyboard bug under iOS after closing selection (#1127)

  @zeitiger

  • Fix highlighting more than one character (#1099, #1098)

  @skimi

  Source code(tar.gz)
  Source code(zip)
  

• v0.12.2(Jun 23, 2016)

  • Fix issue preventing build ("Cannot assign to read only property 'subarray'") because of bug in uglifyjs. (#1072)

  @jaridmargolin

  • Fix tabbing issue (#877) on IE11. (#997)

  @bwilson-ux

  • Fix jQuery initialization for jQuery >= 1.9 (#1045)

  @mpokrywka

  • Make remove_button work for single-option usage (#848)

  @ChoppyThing

  • Fixed bug that made allowEmptyOption: true useless (#739)

  @mcavalletto

  • Functions in option render can now return a DOM node in addition to text. (#617)

  Source code(tar.gz)
  Source code(zip)
  

• v0.12.1(Apr 16, 2015)

  • Fixed regression causing initialization of multiple <select> elements to have empty options (#756, #717)
  • Fixed strange LESS compilation errors (#713, #714)
  • Fixed silent argument on setValue (#698, #764)

  Source code(tar.gz)
  Source code(zip)
  

• v0.12.0(Jan 30, 2015)

  Additions / Updates

  • Released on NPM as selectize (#60, #604)
  • Added support for using dataAttrto hydrate a text input element: <input type="text" data-data="[{...},{...}]"> (#155, #231, #522)
  • Added splitOn setting that allows pasted text to be broken up into items (#425, @jhash)
  • Added removeOptionGroup, clearOptionGroups methods (#669)
  • Added closeAfterSelect setting (#344)
  • Added $item argument to item_remove event (#585)
  • Added focus, blur events (plus onFocus, onBlurcallbacks)
  • Added ability to pass callback to createItem (for use with async option creation)
  • Updated sifter.js to 0.4.0
    • Text sorting is now locale-aware.
    • Added Polish diacritics: łŁ

  Bugfixes

  • Don't allow tabbing/focus to selectize control that is disabled (#583, #307)
  • Don't propagate ESC keypress when closing menu – for when selectize is used in modals (#672)
  • Set option labels on original, hidden <select> element (#512)
  • Improved focus, blur handling (particularly IE)
  • Disabled validity API ("required" prop) on Android. Support for it is too erratic currently.
  • Allow tabbing to next control when control is full (#629)
  • Render functions can now return strings that start w/newline characters (#645)
  • Fixed grunt module building on Windows (#453)

  Breaking Changes

  • Made addOption, addOptionGroup add implicit $order property (if not already set). The property used to only be added to options populated from the DOM (#640, #381, #499, #198)
  • Removed optgroupOrder setting. Constraining the option group render order is now achieved by setting lockOptgroupOrder: true. To customize the order, set the $order property on each item in your optgroups array

  Source code(tar.gz)
  Source code(zip)
  

• v0.11.1(Sep 23, 2014)

  Additions

  • Added copyClassesToDropdown option (#577, thanks @leevigraham)

  Fixes

  • Fix for cases when getComputedStyle returns null (#520)
  • Fixed LESS compile warning (#303)
  • Fixed "canCreate() is not a function" error (#532)
  • Fixed createFilter receiving lowercased values (#567)
  • Fixed regression: onLoad callback not being called (#556)
  • Fixed issue where search not invalidated after updateOption.

  Source code(tar.gz)
  Source code(zip)
  

• v0.10.1(Jun 2, 2014)

  • Improvement: bind createFilter callback to Selectize instance.

  Source code(tar.gz)
  Source code(zip)
  

• v0.10.0(Jun 2, 2014)

  Additions:

  • Added createFilter option that allows you to use a callback or regular expression to determine when the "Add x..." dropdown item is shown (#414). Super useful. Thanks @nlwillia.
  • Added clearCache() method, for clearing the cache of rendered items and options (#276). Useful in some advanced use cases. Thanks @dguenther

  Fixes:

  • Fixed bug causing the clear() and setItem() methods to not update available options in dropdown on next focus (#438).
  • Fixed bug causing scrollbar clicks in IE to close the dropdown (#370, #182, #157). Thanks @benmj
  • Ensure control does not lose focus when selecting option with TAB key (#352). Thanks @cordmata
  • Major performance improvements to setValue, addItem (#433, #423). Thanks @Scottmitch1
  • Better releasing of resources on destroy (#435) Thanks @Scottmitch1
  • Minor CSS for Bootstrap 3 when using "remove_button" plugin (#422). Thanks @jiromm
  • Exclude package.json from bower release (#418). Thanks @franleplant
  • IE: Don't set "required" prop to false (instead, don't set the property at all) (#405). Thanks @travisr

  Source code(tar.gz)
  Source code(zip)
  

• v0.9.1(Apr 30, 2014)

  • Acknowledge autocomplete and autocorrect attributes (#378). Great for iOS. Thanks @rossshannon!
  • Restored default TAB-key behavior to the way it was before 0.9.0. In order to select an option with TAB press, use the selectOnTab (#371). Thanks @ryanwersal!
  • Fixed CMD/CTRL actions when a control is full (#146). E.g: Cmd+R to refresh the page used to fail.
  • Fixed bug causing rendered options/items to remain in cache even after being removed (#358).
  • Hide IE's obnoxious "X" button on the inner input (#383).
  • Fixed autogrowing input bug that could cause layout problems in some conditions (#384).
  • Allow result loading to not be debounced (#372). Thanks @ryanwersal!
  • Fixed input for polish letter "ń" (ctrl-alt-n) (#361). Thanks @icdark!
  • Fixed IE rendering bug on the "remove_button" plugin (#392).

  Source code(tar.gz)
  Source code(zip)
  

• v0.9.0(Mar 21, 2014)

  • Options can now be selected with the TAB key (#258). Thanks @code-guru!
  • Added Cmd+N/P support (#282) to cycle options in the dropdown menu. Thanks @caseywebdev!
  • Optimized setValue() to be much faster when setting multiple values (#306). Thanks @jeff-mccoy!
  • Optimized initialization of many Selectize controls at once (#243). Thanks @enoshixi!
  • Added CommonJS export definition for browserify users (#330).
  • Fixed preload: "focus" behavior (#245) Thanks @lananelson!
  • Fixed Selectize in XHTML+XML environments (#230) Thanks @ankit!
  • Fixed event handler when remove_button label contains HTML. Thanks @sjhewitt!
  • Creating items when the control is without focus does not cause the dropdown to open now. Thanks @sjhewitt!

  Source code(tar.gz)
  Source code(zip)
  

• v0.8.5(Nov 25, 2013)

  • The standalone JS build now has all modules named (not anonymous). This allows it to be used in Require.js environments (#89)
  • Fixed bug causing CMD+A to make control not editable (when in "single" mode) (#194)
  • Fixed bug causing the dropdown to be incorrectly positioned after the entire selection is deleted via deleteSelection() (#190)

  Source code(tar.gz)
  Source code(zip)
  

• v0.8.4(Nov 14, 2013)

  • Added "createOnBlur" option. When the user clicks outside the control, the text in the textbox will be added & selected (as if pressing the Return key). This is useful for tagging and email address input contexts.

  Source code(tar.gz)
  Source code(zip)
  

• v0.8.3(Nov 12, 2013)

  • Fixed a bug that caused the initially-selected option to not reappear in the dropdown after the selection changes – apparent when hideSelected: true (tweet).

  Source code(tar.gz)
  Source code(zip)
  

• v0.8.2(Nov 3, 2013)

  • Fixed bug that caused buggy/erratic behavior with values containing "$" characters (#172)
  • Fixed bug causing "change" event to be fired when user selects existing selection (value doesn't change) (#175)
  • Fixed "required" attribute check so that it doesn't throw on old versions of jQuery / IE (#180)
  • Improved keyboard-based dropdown scrolling (#183). Thanks, @dosource!
  • Fixed "-1" tab index being left after destroy() (#171). Thanks, @ScottHamper!
  • Fixed e.preventDefault exception in onFocus (#179). Thanks, @djspig!

  Source code(tar.gz)
  Source code(zip)
  

• v0.8.1(Oct 17, 2013)

  • Fixed the destroy() method so that it restores original options, optgroups, and tabindex that existed originally before running Selectize (#142, #153, #145).

  Source code(tar.gz)
  Source code(zip)
  

• v0.8.0(Oct 12, 2013)

  • Added right-to-left (RTL) environment support (#109).
  • Added multi-property sorting (with configurable direction per field).
  • Added "required" attribute handling (#136, #63). Thanks to @sjhewitt.
  • Added support for the same option in multiple optgroups (#76).
  • Improved width handling of inner textbox when leading/trailing whitespace is present (#122). Thanks to @jacquelinewheeler.
  • Clicking the control when focused now toggles the dropdown when in single mode (#75, #126).
  • Highlight selected item in dropdown on focus (#104, #131).
  • Added "searchConjunction" setting to allow multiple search terms to be joined by an "and" or "or" operator.
  • Added "addPrecedence" setting to allow the "Add..." item to be selected by default when in create mode (#118).
  • Fixed bug causing "remove_button" and "drag_drop" plugins to still be usable when control is locked/disabled (#140).
  • Disabled native browser autocomplete on control.

  Multi-Property Sorting

  With the new sifter v0.3 integration, you can now sort results by multiple fields. The "sortDirection" setting has been removed.

  sortField: [
      {field: 'first_name', direction: 'asc'},
      {field: 'last_name', direction: 'asc'}
  ]
  

  Special Fields

  "$score"	A number representing how good of a match an item is for the current search.
  "$order"	The original index of an option in a <select> before selectize was initialized.

  Source code(tar.gz)
  Source code(zip)
  

• v0.7.7(Sep 16, 2013)

  • Fixed addOptionGroup() ("value" not defined exception).
  • Fixed getItem() and getOption() to handle values with backslashes properly.

  Source code(tar.gz)
  Source code(zip)
  

• v0.7.6(Sep 15, 2013)

  • Fix for original select option order not always being respected #108.
  • Fix from @bawigga for #112 (fixes Array.isArray polyfill).

  Source code(tar.gz)
  Source code(zip)
  

• v0.7.0(Aug 24, 2013)

  Features

  • Modularized components. Separates concerns, improves testability, allows development to diverge, and allows code to be shared with other libraries.
    • sifter — Filtering and sorting.
    • microplugin — Plugin system.
  • LESS Stylesheets. With a comprehensive set of variables, skinning is orders of magnitude easier. Furthermore, plugins can take advantage of theme-specific settings.
    • Added shims for Bootstrap 2 and Bootstrap 3.
  • All build files now live in the "dist" folder.
  • New Grunt-based build system.

  API

  • Added destroy() method (#35).
  • Removed the "theme" setting. All it did was add an extra class to the control. If you want the same functionality, just add a class to the <select> you're selectizing.
  • Removed the need to pass the value when adding options via addOption(value, data). Now it's simple: addOption(data). The value is extracted from the data automatically, according to the "valueField" setting.

  Source code(tar.gz)
  Source code(zip)
  

• v0.6.13(Aug 9, 2013)

  • The dropdown is now repositioned on scroll to allow for scenarios where the control is contained within a position: fixed element
  • Bug fix for control receiving focus after addItem() calls (#66)
  • Bug fix for items not being re-rendered after updateOption() calls if the value of the option changes (edge case)

  Source code(tar.gz)
  Source code(zip)
  

Owner

GitHub http://selectize.github.io/selectize.js/

Autocomplete - Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip

Autocomplete - Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip

58 Dec 24, 2022

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

downshift ?? Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. Read the docs | See

11.1k Jan 1, 2023

A vanilla JS customisable select box/text input plugin ⚡️

Choices.js I'm looking for active maintainers for this project as I no longer have the time to support it. Please get in touch if you're interested ??

5.4k Jan 7, 2023

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Select2 Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results. To get started, ch

25.5k Jan 1, 2023

typeahead.js is a fast and fully-featured autocomplete library

typeahead.js Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundat

16.5k Dec 31, 2022

🔮 Fast and full-featured autocomplete library

Autocomplete A JavaScript library that lets you quickly build autocomplete experiences ?? Autocomplete v1 is in an alpha phase and early feedback is w

2.3k Jan 6, 2023

🔮 Fast and full-featured autocomplete library

A JavaScript library that lets you quickly build autocomplete experiences All you need to get started is: A container to inject the experience into Da

2.3k Jan 1, 2023

Ultra lightweight, usable, beautiful autocomplete with zero dependencies.

Awesomplete https://leaverou.github.io/awesomplete/ Awesomplete is an ultra lightweight, customizable, simple autocomplete widget with zero dependenci

6.9k Jan 2, 2023

:globe_with_meridians: Turn any

into an address autocomplete

Deprecation of service Places is going away on May 31st 2022. Read our blog post announcement. Introduction Algolia Places provides a fast, distribute