In this article , I have explained you how you can Make a Dropdown with Search Box using jQuery.
Here, I have used chosen jQuery plugin , which help us to achieve this functionality with just one single line.
Below is the code which you can copy and paste in your favorite code editor.
Run the code and check in your browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"
integrity="sha512-eSeh0V+8U3qoxFnK3KgBsM69hrMOGMBy3CNxq/T4BArsSQJfKVsKb5joMqIPrNMjRQSTl4xG8oJRpgU2o9I7HQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css"
integrity="sha512-0nkKORjFgcyxv3HbE4rzFUlENUMNqic/EzDIeYCgsKa/nwqr2B91Vu/tNAu4Q0cBuG4Xe/D1f/freEci/7GDRA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Document</title>
</head>
<body>
<h1>Subscribe to What About Coding</h1>
<select data-placeholder="Choose a name..." class="ch">
<option></option>
<option>Milli</option>
<option>Jhon</option>
<option>Harry</option>
<option>Jessica</option>
</select>
<script>
$(document).ready(function () {
$(".ch").chosen({
width: "95%",
no_results_text: "Oops, nothing found!",
allow_single_deselect: true,
});
});
</script>
</body>
</html>
If it worked , leave a like and share it with your friends.
i want to change size and background color of select option?