SelectizeJs hybrid of text field and select dropdown

SelectizeJs is a combination of Text field and Select dropdown. It depends on Jquery and it has an input field with autocomplete feature. You can use it for tagging dropdown data. It is very small in size about 7KB.

The objective is to offer a stable & usable expertise with a clear and highly effective API.

SelectizeJs hybrid of text field and select dropdown
SelectizeJs hybrid of the text field and select dropdown

In order to use Selectize Js, You need to include jQuery and jQuery UI along with selectize.js in your project.

How to use SelectizeJs in the project:

Add jQuery and selectizejs before closing tag of 'body' (</body>): 

When you adding jquery in your project. Make sure that any version of jquery is not added before in your project. If it exists then don't include jquery library. In this case, only include selectize file.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/selectize.js"></script>

Add CSS file before closing tag of 'head' (</head>)

<link rel="stylesheet" href="selectize.css">

Add Input field in HTML

Now add input field inside the body where you want this feature.

<input type="text" id="input-tags" class="demo-default" value="awesome,neat">

 

Enable selectizeJs feature in this input field

Use id ("input-tags")  of the input field as a reference.

$('#input-tags').selectize({

  // An array of the initial options available to select; array of objects. 
  // By default this is populated from the original input element. 
  // If your element is a <select> with <option>s specified this property gets populated automatically. 
  // Setting this property is convenient if you have your data as an array and want to automatically generate the <option>s.
  options: [],

  // Initial selected values.
  items: []

  // Option groups that options will be bucketed into. 
  // If your element is a <select> with <optgroup>s this property gets populated automatically. 
  // Make sure each object in the array has a property named whatever optgroupValueField is set to.
  optgroups: [],

  // Custom delimiter character to separate items
  delimiter: ',',
  splitOn: null, // regexp or string for splitting up values from a paste command

  // If false, items created by the user will not show up as available options once they are unselected.
  persist: true,

  // Enable or disable international character support.
  diacritics: true,

  // Allows the user to create new items that aren't in the initial list of options. 
  // This setting can be any of the following: true, false (disabled), or a function to process input. 
  // The function can take one of two forms: synchronous (with signature function(input){} or asynchronous (with signature function(input, callback). 
  // In the synchronous case, the function should return an object for the options (eg, with defaults: return { 'value': value, 'text': text };). 
  // The asynchronous version should invoke the callback with the result in the same format as the object above (eg, callback( { 'value': value, 'text': text});)
  create: false,

  // If true, when user exits the field (clicks outside of input), a new option is created and selected (if create setting is enabled).
  createOnBlur: false,

  // Specifies a RegExp or a string containing a regular expression that the current search filter must match to be allowed to be created. 
  // May also be a predicate function that takes the filter text and returns whether it is allowed.
  createFilter: null,

  // Toggles match highlighting within the dropdown menu.
  highlight: true,

  // Show the dropdown immediately when the control receives focus.
  openOnFocus: true,

  // The max number of items to render at once in the dropdown list of options.
  maxOptions: 1000,

  // The max number of items the user can select. Null allows an unlimited number of items
  maxItems: 1,

  // If true, the items that are currently selected will not be shown in the dropdown list of available options.
  hideSelected: false,

  // If true, the "Add..." option is the default selection in the dropdown.
  addPrecedence: false,

  // If true, the tab key will choose the currently selected item.
  selectOnTab: false,

  // If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus.
  preload: false,

  // Allows empty options.
  allowEmptyOption: false,

  // If true, the dropdown will be closed after a selection is made.
  closeAfterSelect: false,

  // The animation duration (in milliseconds) of the scroll animation triggered when going [up] and [down] in the options dropdown.
  scrollDuration: 60,

  // The number of milliseconds to wait before requesting options from the server or null. 
  // If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression.
  loadThrottle: 300,

  // The class name added to the wrapper element while awaiting the fulfillment of load requests.
  loadingClass: 'loading',

  // The placeholder of the control (displayed when nothing is selected / typed). 
  // Defaults to input element's placeholder, unless this one is specified.
  placeholder: undefined,

  // The <option> attribute from which to read JSON data about the option.
  dataAttr: 'data-data',

  // The name of the property to group items by.
  optgroupField: 'optgroup',

  // The name of the property to use as the value when an item is selected.
  valueField: 'value',

  // The name of the property to render as an option / item label (not needed when custom rendering functions are defined).
  labelField: 'text',

  // The name of the property to disabled option and optgroup.
  disabledField: 'disabled',

  // The name of the property to render as an option group label (not needed when custom rendering functions are defined).
  optgroupLabelField: 'label',

  // The name of the option group property that serves as its unique identifier.
  optgroupValueField: 'value',

  // If truthy, Selectize will make all optgroups be in the same order as they were added (by the `$order` property). 
  // Otherwise, it will order based on the score of the results in each.
  lockOptgroupOrder: false,

  // A single field or an array of fields to sort by. 
  // Each item in the array should be an object containing at least a field property. 
  // Optionally, direction can be set to 'asc' or 'desc'. 
  // The order of the array defines the sort precedence.
  sortField: '$order',

  // An array of property names to analyze when filtering options.
  searchField: ['text'],

  // When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' .
  searchConjunction: 'and',

  // multi or single
  mode: null,

  // Default classes
  wrapperClass: 'selectize-control',
  inputClass: 'selectize-input',
  dropdownClass: 'selectize-dropdown',
  dropdownContentClass: 'selectize-dropdown-content',

  // The element the dropdown menu is appended to. This should be 'body' or null. If null, the dropdown will be appended as a child of the Selectize control.
  dropdownParent: null,

  // Copy the original input classes to the dropdown element.
  copyClassesToDropdown: true,

  //  Custom rendering functions. Each function should accept two arguments: data and escape and return HTML (string or DOM element) with a single root element. 
  // The escape argument is a function that takes a string and escapes all special HTML characters. This is very important to use to prevent XSS vulnerabilities.
  render: {
    /*
    item: null,
    optgroup: null,
    optgroup_header: null,
    option: null,
    option_create: null
    */
  }

});



That's it. Now your input field works as autocomplete tag.

See the Pen Selectize JS Library Demo