Selectize.JS – jQuery based hybrid of a textbox and <select> box for tagging purpose with autocomplete and native-feeling keyboard navigation

Selectize is the hybrid of a textbox and <select> box. It’s jQuery-based and 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 user-experience with a clean and powerful API.

It’s a lot like Chosen, Select2, and Tags Input but with a few advantages. Developed by @brianreavis (partly at DIY). Licensed under the Apache License, Version 2.0… so do whatever you want with it!

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.

 

Selectize – Usage

<script type="text/javascript" src="selectize.js"></script><link rel="stylesheet" type="text/css" href="selectize.css" /><script>$(function() {    $('select').selectize(options);});</script>

 


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

Options & Usage: https://github.com/selectize/selectize.js/blob/master/docs/usage.md

Source Code: https://github.com/selectize/selectize.js

API documentation: https://github.com/selectize/selectize.js/blob/master/docs/api.md

Plug-in documentation: https://github.com/selectize/selectize.js/blob/master/docs/plugins.md


Thanks for reading,
Nabeel Shahid.