Searchable dropdown using select2 jquery plugin

Hello everyone, in this article I am going to explain how can we make a simple drop-down (picklist) to searchable list using select2 jquery plugin with an example.

We used to have a complex code to make a drop-down to searchable one, in the process of optimizing code I came across select2 plugin, this is very simple yet power plugin works in all web platforms including mobile webview.

Let's start with an example how to use select2 plugin.

Download select2.min.js and select2.min.css files from below path

https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css

https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js

Include in your application as shown below

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

include below code snippet in your js file

$('#example').select2({

    placeholder: 'Select a month'

});

find below complete example

Output looks like