Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. We’ve used Select2.js in many of our web applications, and for the same I would like to share how to use Select2.js.
Installation
In order to use Select2, you must include the complied JavaScript and CSS files on any web application & website.
There are multiple options for including these pre-complied files, also known as a distribution, in any website or application.
Using Select2 from a CDN
A CDN (content delivery network) is the fastest way to get up and running with Select2!
Select2 is hosted on both jsDelivr and cdnjs CDNs. Simply include the following lines of code in the section of web application/web page.
Installing with Bower
Select2 is available on Bower. Add the following to web application bower.json file and then run bower install
"dependencies": {
"select2": "~4.0"
}
Or, run bower install select2 from the project directory
The precompiled distribution files will be available in vendor/select2/dist/css and vendor/select2/dist/js/, relative to your project directory. Include them in your page:
Use Cases of Select2.js
- Enhancing native selects with search
- Enhancing native selects with a better multi-select interface
- Loading data from JavaScript: easily load items via Ajax and have them searchable
- Nesting optgroups: native selects only support one level of nesting. Select2 does not have this restriction.
- Tagging: ability to add new items on the fly.
- Working with large, remote datasets: ability to partially load a dataset based on the search term.
- Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.
- Templating: support for custom rendering of results and selections.
Browser Compatibility
- IE 8+
- Chrome 8+
- Firefox 10+
- Safari 3+
- Opera 10.6+
Internationalization. (i18n)
Select2 support multiple languages by simply including the right languages JS file (dist/js/i18n/it.js, dist/js/i18n/n1.js, etc.) after dist/js/select2.js.
Missing a language? Just copy src/js/select2/i18n/en.js, translate it, and make a pull request back to Select2 from Github.
Usage – here I’m going to share with a small use of Select2.js
<select class=”select2” name=”state”>
<option value=”jaipur”>Jaipur</option>
<option value=”bhilwara”>Bhilwara</option>
<option value=”udaipur”>Udaipur</option>
</select>
Now, put below jQuery code just before end of the </body> tag
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.select2’).select2();
});
</script>
For multiselect dropdown, use multiple attribution to <select> tag
<select class=”select2” name=”state” multiple=”multiple”>
<option value=”jaipur”>Jaipur</option>
<option value=”bhilwara”>Bhilwara</option>
<option value=”udaipur”>Udaipur</option>
</select>
JavaScript would be same as:-
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.select2’).select2();
});
</script>
Select2 can also load data from AJAX request, just put <select> option blank and use the below code in <script> tag
$(‘.select2’).select2({
ajax: {
url: ‘https”//xyzwebsite.com/api/get-data’,
datatype: ‘json’
}
});
Select2 can also load data from local array.
var data = [
{
id: 0,
text: ‘Jaipur’
},
{
id: 1,
text: ‘Bhilwara’
},
{
id: 3,
text:’Udaipur’
}
];
$(“.select2”).select2({
data: data
});
Here is the full documentation available for Select2.js, I would recommend you must use it in your web application – Github
I hope the above content would be useful to your beginning with Select2.js. I will keep posted such interesting read from my day 2 day learnings.
Happy Coding!
Best Regards,
Sonam
