In this asp .net tutorial we will learn how to use JQuery Select2 plugin to integrate search functionality into asp .net dropdownlist controls. Select2 is a very powerful and well written JQuery plugin which easily provides a feature of searching between items of any dropdown/select, so that users have options to select or search any item within dropdownlist.
This plugin not only adds search feature to dropdownlist controls but also provides a cool look to dropdownlist controls.
Step1: Create a new asp .net website.
Step2: Add a dropdownlist into your page.
NOTE: In this example I have used static values in my dropdownlist however you can also you’re your dropdownlist with database.
Step2: Download Jquery Select2 plugin codded by Igor Vaynberg.
Click here to download.
Step3: Create a new folder in your website and copy following files from the downloaded folder:
1. select2-spinner.gif
2. select2.css
3. select2.js
4. select2.png
5. select2_locale_en.js.template
(This file is to provide globalization support if you are creating your application in any other language rather than English you can add files which is specific to your culture e.g. : select2_locale_ru.js is for Russian)
6. select2x2.png
Step4: Add reference to Jquery in your website.
Here I am using google’s CDN network for JQuery. Place this code between <head> section of page.
Step5: Add refrence of CSS and JQuery files from select2 folder (Created in step3):
Step6: Initialize Select2 plugin on website page.
Add this code above the </body> tag of your page. If you are using in content page then add before closing tag of your contentplaceholder.
$(document).ready(function () { $("#myDropDownlistID").select2(); });
I would like to thanks Igor Vaynberg for such a wonderfull code.
Final Output
