|
Create a searchable dropdown select with jQuery by enhancing a standard HTML <select> element. This improves user experience by allowing quick and efficient selection from large lists.
PrerequisitesApproach- The HTML document includes the standard structure with “<!DOCTYPE html>”, “<html>”, “<head>”, and “<body>” tags. It sets the character encoding to UTF8 and the viewport for responsive design.
- The document title is set to “Create Searchable Dropdown Select With jQuery”.
- The jQuery library is included via a CDN to facilitate DOM manipulation and event handling.
- The body has a flexbox layout to center its contents vertically and horizontally.
- The “.container” class centers the text.
- The “.search-dropdown” class sets the width and position of the dropdown.
- The “.dropdown-display” class styles the dropdown display area with padding, font size, border, border-radius, and box shadow.
- The “.dropdown-content” class sets the absolute position, border, background color, and zindex for layering.
- It hides the content by default (“display: none”), with a max-height and overflow settings for scrolling.
- The “.search-input” class styles the search box with padding, font size, border, and box shadow.
- The “.dropdown-content ul” class removes default padding and margin from the list.
- The “.dropdown-content ul li” class adds padding and hover effects to list items.
- The script waits for the document to be fully loaded before running.
- It sets up event handlers for interacting with the dropdown.
- Clicking the “.dropdown-display” toggles the visibility of “.dropdown-content”.
- Typing in the search input filters the dropdown list items, showing only those that match the input.
- Clicking a list item updates the “.dropdown-display” text and hides the dropdown.
- Clicking outside the dropdown hides the “.dropdown-content” to close the dropdown.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Create Searchable Dropdown
Select With jQuery</title>
<!-- Include jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
.search-dropdown {
width: 300px;
margin: 20px auto;
position: relative;
}
.dropdown-display {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.dropdown-content {
position: absolute;
top: 100%;
left: 0;
right: 0;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #fff;
z-index: 1000;
display: none;
max-height: 200px;
overflow-y: auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.search-input {
width: 100%;
padding: 10px;
font-size: 16px;
border: none;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.dropdown-content ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.dropdown-content ul li {
padding: 10px;
cursor: pointer;
}
.dropdown-content ul li:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div class="container">
<h2>Create Searchable Dropdown Select With jQuery</h2>
<div class="search-dropdown">
<div class="dropdown-display"
id="dropdownDisplay">Select any fruit</div>
<div class="dropdown-content"
id="dropdownContent">
<input type="text"
class="search-input"
id="searchInput"
placeholder="Search any fruit">
<ul id="dropdownList">
<li>Apricot</li>
<li>Avocado</li>
<li>Banana</li>
<li>Blackberry</li>
<li>Blueberry</li>
<li>Cherry</li>
<li>Coconut</li>
<li>Cranberry</li>
<li>Date</li>
<li>Watermelon</li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#dropdownDisplay').on('click', function () {
$('#dropdownContent').toggle();
});
$('#searchInput').on('input', function () {
let value = $(this).val().toLowerCase();
$('#dropdownList li').filter(function () {
$(this).toggle($(this).text()
.toLowerCase().indexOf(value) > -1);
});
});
$('#dropdownList').on('click', 'li', function () {
$('#dropdownDisplay').text($(this).text());
$('#dropdownContent').hide();
});
$(document).on('click', function (e) {
if (!$(e.target).closest('.search-dropdown').length) {
$('#dropdownContent').hide();
}
});
});
</script>
</body>
</html>
Output: Output
|
