This blog is all about search functionality in a dropdown in PHP and jQuery. Searchable dropdown is very good features in a web application, If your drop down list is lengthy and you need to search select some particular item or name then it will take much time to user. its very annoying and not user friendly . To avoid this, if we add search functionality then it will be super cool.
It’s a less than minute of code. just see the below and use the code snippet. Here we need to take help of select2 js library and its CSS, which is given below. and add your select box as per HTML.
searchbox_dropdown.php
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> <div style="margin-left: 500px; margin-top: 200px;"> <form action="" method="post"> <select id='country' name="country" style='width: 200px;'> <option value='0'>---Choose country</option> <option value='1'>India</option> <option value='2'>America</option> <option value='3'>Pakistan</option> <option value='4'>Russia</option> <option value='5'>France</option> <option value='6'>Japan</option> <option value='7'>China</option> </select> <br/> <input type="submit" name="save" value="submit"> </form> </div> <script> $(document).ready(function(){ $("#country").select2(); }); </script> |