3 of the best Javascript Searchable Select Boxes compared – Select2 vs Chosen vs Selectize.js performance

When having large amounts of jQuery/javascript select boxes that need to be searchable it is wise looking at the performance of them. I compared the following select replacement boxes: Select2, Chosen, Selectize.js, Bselect. Default Safari browser select box: initializing about 0.5s.

Setup

Having a backend page that has about 1000 select boxes that need to be initialized by a searchable/autocomplete selectbox. I checked the loading times of the page and the time of the initializitation of the select box. I measured it first by hand and later on by Safari web console.

Chosen performance

  • Measuring by hand: about 8s-11s.
  • Console measure: about 12s.Chosen select box performance

Cons:

  • Has no ajax support, if you want to do this, you can combine it with select2.

Select 2 performance

  • Measuring by hand: initializing takes about 9s-16s.
  • Console meaure:  about 21.69s.Select2 select box performance

Selectize.js performance

Selectize.js: about 19s. Console crashes after 29s. So, I exclude further results.

Bselect performance

Bselect: more than 40s, I got bored counting, so I exclude further results.

And the winner is … Chosen

It is initializes as fastest, being about 1,5x as fast as Select2. Although, Select2 has lot more functionalities and is better maintained. When you only need simple searchable select boxes and mind about performance, Chosen is the best choice. Note that it is only one simple configuration, it might be that in other configurations Select2 is faster than Chosen.



jQuery Address and History Forms – Remembering form choices in hash / browserstate (updated version)

For jQuery hash support I like the jQuery Address plugin: http://www.asual.com/jquery/address/ . Especially, if you want to make a form or product filter, you can use this variant: http://www.asual.com/jquery/address/samples/form/ .

Though, it doesn’t support checkboxes in the form of arrays like check[]=1&check[]=2 , etc. I updated the plugin with some other libraries and code and now it works.

You can download it here.