Questions tagged [selectize.js]

Selectize is a jQuery based hybrid form control, combining elements of both “textbox” and “select”. It includes autocomplete, native-feeling keyboard navigation and is able to utilize remote data sources to build visually rich controls.

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.

Features

  • Smart Option Searching / Ranking
  • Caret between items
  • Select & delete multiple items at once
  • Díåcritîçs supported
  • Item creation
  • Remote data loading
  • Clean API & code
  • Extensible
  • Touch Support

Resources

Related tags

673 questions
13
votes
3 answers

Selectize.js custom rendering with static html

I am using the brilliant selectize.js library to generate an attractive select box with option groups. It is all working but I am stuck at the point that I cannot use the custom renderer from the examples page (Email contacts)…
Martin Horvath
  • 466
  • 1
  • 6
  • 18
13
votes
1 answer

selectize js autocomplete doesnt seem to work

Please see the following example fiddle : Although I can select the option from the dropdown, typing doesnt autocomplete. I would expect that when you type B or A you should get the recommendation for banana, apple. Only when of my items in the…
Athanatos
  • 1,089
  • 6
  • 15
  • 32
12
votes
5 answers

Selectize dropdown width independent of input

I am trying to use Selectize to render a dropdown of very long labels. The text can be pretty wide, but the input has a constraint on width. Selectize perfectly wraps the text (in both the input and drop downs) but ideally the drop down would be…
rapidninja
  • 281
  • 1
  • 5
  • 10
12
votes
3 answers

selectize.js reload dropdown

I have a dropdown with id "selectCountry" filled by ajax and on success I just bind the Selectize. $('#selectCountry').selectize({ create: true, sortField: 'text' }); When I rebind my original dropdown by ajax and try to reload/rebind or…
Obaid Ahmed
  • 596
  • 1
  • 3
  • 16
12
votes
3 answers

Symfony2 and Selectize.js: Clearest way to persist new items in entity field type?

In Symfony2 I have BandType, where I add the entity Tag: ->add('tags', 'entity', [ 'label' => 'Tags', 'class' => 'DbBundle:Tag', 'property' => 'title', 'multiple' => true, ]) This generate multiple select element, where I can…
Tomas S.
  • 329
  • 2
  • 9
12
votes
10 answers

How to change placeholder of selectize.js dropdown?

I want to change placeholder of a dropdown created by selectize.js when the parent dropdown changes its selection to load the options of the dropdown whose placeholder to be changed. There is no method to do this in documentation.
freezer
  • 531
  • 1
  • 11
  • 28
11
votes
2 answers

Change Selectize Choices But Retain Previously Selected Values

Question I have two dropdowns, the choices available in dd2 are conditional on option selected in dd1. I"m unable to figure out how to change the options of dropdown 2 but retain whatever selection has already been made. I should also be able to…
TheComeOnMan
  • 12,535
  • 8
  • 39
  • 54
11
votes
4 answers

Selectize.js: cloning of the element and destroy() issue

I'm using Selectize.js and I need to clone html subform with transformed select elements. After I clone and insert subform select functionality is broken. I have read that one of the solution is to call destroy() method for cloned selects and after…
Tamara
  • 2,910
  • 6
  • 44
  • 73
11
votes
9 answers

Get Text From Selected using selectize

I've tried this: var eventHandler = function() { return function() { console.log($select.val()); }; }; var $select = $('.selectize').selectize({ create : true, onChange : eventHandler() }); Which get me the…
Casey
  • 1,941
  • 3
  • 17
  • 30
11
votes
3 answers

Selectize.js and jQuery validation

I'm trying to validate a form that uses the Selectize.js to select and jQuery Validation plugin for validation. I can not make it work. The script validates the input fields, but not the select:
Name:
Ivan
  • 515
  • 3
  • 7
  • 22
11
votes
1 answer

Add item to input programmatically

Selectize.js allows to transform inputs into widgets with tagging, auto-complete etc.. I'm trying to add tag into input using code. Here's what I have so far. $(function() { $("#tags").selectize({ create: true }) var…
daGrevis
  • 21,014
  • 37
  • 100
  • 139
10
votes
3 answers

Selectize.js: onItemAdd event triggered when silently adding an item

Using Selectize.js, I'm trying to initialize the dynamically pre-select one of the item of the list without triggering the onItemAdd event. In the following code, the event is triggered even if the silent parameter is truthy: $(function () { …
Romain G
  • 1,276
  • 1
  • 15
  • 27
10
votes
4 answers

How to remove an item from Selectize?

Is there any way I can remove an item from Selectize? Here is my a sample list: AMNT QTY NA When I pass NA it should remove particular item: $.fn.removeSelectorValue = function (value) { var selectize = this[0].selectize; …
John
  • 666
  • 1
  • 9
  • 22
10
votes
6 answers

Capybara integration tests with jquery.selectize

How can I write a capybara integration test with a form using jquery.selectize? I'd like to test a user entering a couple of values.
Marc-André Lafortune
  • 78,216
  • 16
  • 166
  • 166
9
votes
5 answers

Jquery Selectize Add "Clear All" link at the top of options from Ajax

I am using Jquery's Selectize tagging library which works well for me so far. Below is the code I have used. Javascript Code: $('#q').selectize({ plugins: ['remove_button'], valueField: 'address', labelField: 'address', searchField:…
Mittul At TechnoBrave
  • 1,142
  • 3
  • 25
  • 70
1
2
3
44 45