Make a Dropdown with Search Box using jQuery

You already know that in HTML there is no search option in the dropdown element.

When you press any single key in the dropdown then it takes you to the option but not allows you to search whole or particular string.

Searching is required on the list when there is a long list of items that are available.

It is time-consuming to find the option by scrolling the list.

In this tutorial, I show how you create a dropdown with a search box using the select2 plugin and read the selected option.

Make a Dropdown with Search Box using jQuery


Contents

  1. Download and Include
  2. HTML
  3. jQuery
  4. Demo
  5. Conclusion

1. Download and Include

  • Download select2 library from GitHub.
  • Include select2.min.css and select2.min.js with jQuery library in <head> section.
<!-- Select2 CSS --> 
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> 

<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<!-- Select2 JS --> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

2. HTML

Create a dropdown element and added some options. Also created a button to read selected dropdown option and display in <div id='result'>.

Completed Code

<!-- Dropdown --> 
<select id='selUser' style='width: 200px;'>
  <option value='0'>Select User</option> 
  <option value='1'>Yogesh singh</option> 
  <option value='2'>Sonarika Bhadoria</option> 
  <option value='3'>Anil Singh</option> 
  <option value='4'>Vishal Sahu</option> 
  <option value='5'>Mayank Patidar</option> 
  <option value='6'>Vijay Mourya</option> 
  <option value='7'>Rakesh sahu</option> 
</select>

<input type='button' value='Seleted option' id='but_read'>

<br/>
<div id='result'></div>

3. jQuery

Initialize select2() on <select id='selUser'> and define click event on the button to read the selected option text and value.

Display the values in <div id='result'>.

Completed Code

$(document).ready(function(){
 
  // Initialize select2
  $("#selUser").select2();

  // Read selected option
  $('#but_read').click(function(){
    var username = $('#selUser option:selected').text();
    var userid = $('#selUser').val();

    $('#result').html("id : " + userid + ", name : " + username);

  });
});

4. Demo

View Demo


5. Conclusion

I hope this tutorial, helps you to create a dropdown element with a search box using a select2 plugin.

If you want to know how to load data using AJAX in select2 then you can view this tutorial.

If you found this tutorial helpful then don't forget to share.
Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request.

19 thoughts on “Make a Dropdown with Search Box using jQuery”

  1. How To Search Full String In PHP by using JavaScript Jquery Ajax Or PHP
    e.g
    String1 is Nil Der Hiteshbhai
    String2 is jeet Rathod Himmatbhai
    I want My Search Button in DropDown Box
    If Am I Search Nil Der Than Ok But When am i Try to search Nil Hiteshbhai it Should not work so solve this query…….

    Reply
    • For this, you can explode the search string (Nil Hiteshbai) by space (‘ ‘) to get an Array.

      Array[0] = ‘Nil’;
      Array[1] = ‘Hiteshbai’;

      Loop on the array to create search query –
      SELECT * FROM `users` where name like ‘%Nil%’ or name like ‘%Hiteshbhai%’

      Reply
  2. I am using it in SharePoint site, I am getting. Can u please help to resolve this Object doesn’t support property or method ‘select2’

    Reply
  3. thanks for the post shared. i just tried in my mvc bootstrap + jquery project .. sear and all working perfectly. but on edit giving value to that dropdown but that will re-direct to id.select2() if there is a value no needed to reload that rt .. i need a serious help..
    thanks and regards

    [email protected]

    Reply
  4. hello all,
    i need to create a page that containd a dropdownbox which shows a primarykey of a data and when selcted and click on button.it has to print on a screen in table format using php code

    urgent for my school project.please help.i have only 5 days left

    Reply

Leave a Comment