Before finalizing on Select2 plugin i tried my hands on jQuery UI AutoComplete plugin too. I used both these plugins mainly from 'remote dataset' point of view. Below is a small comparison of these plugins:
- Dependencies: All you need to use Select2 is just jquery plugin. But in case of jQuery UI Autocomplete, there are other dependencies like UI Core, jQuery Widget Factory, Position and Menu plugins.
- Wide variety of options supported in Select2. In select2, it's easy to configure 'multiple' values or a different 'separator' or configure 'maximumSelectionSize'. Everything that's needed was thought and options/callback functions to override are provided. In case of jQuery UI Autocomplete plugin, we have to do custom Javascript coding to achieve even a simple functionality like allowing 'multiple' values.
- Select2 supports lazy-appending of results when the result list is scrolled to the end. (Provided the remote service supports some kind of pagination mechanism). I haven't found anything similar to this in jQuery Autocomplete.
- By default select2 doesn't allow adding a new choice from user's search term whereas jQuery Autocomplete UI allows. In case of select2 we have to use 'createSearchChoice' callback function as explained in previous post, for creation of new choices that are not available from remote query result.
- Finally the JSON response expected from remote request is different in both cases. In case of jQuery Autocomplete plugin, the JSON remote response should be an array of objects like below:
[{"value":"Phani"},{"value":"Kiran"}]
In case of select2 plugin, objects in the JSON response should have both 'id' and 'text' properties like below :[{"id":"1","text":"Phani"},{"id":"2","text":"Kiran"}]
It's also possible to just have 'text' property, but in that case we need to use the 'id' call-back function of select2 as 'id' is mandatory for select2 plugin to work. Refer to this post for related information.
A nice little overview - thanks.
ReplyDeleteThanks!
ReplyDelete