<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<div class="container">
<header>
<h1>Angular Material Search Bars</h1>
<p>Professional search bar examples with different styles and functionalities</p>
</header>
<!-- Search Bar 1: Basic -->
<div class="search-section">
<h2 class="section-title">1. Basic Search Bar</h2>
<p class="section-description">Simple and clean search input with icon button</p>
<div class="search-bar-1">
<input type="text" placeholder="Search..." id="basic-search">
<button onclick="performSearch('basic-search')">
<ion-icon name="search-outline"></ion-icon>
</button>
</div>
</div>
<!-- Search Bar 2: With Filters -->
<div class="search-section">
<h2 class="section-title">2. Search with Filter Chips</h2>
<p class="section-description">Search bar with category filters and clear button</p>
<div class="search-bar-2">
<div class="search-input-wrapper">
<ion-icon name="search-outline" class="search-icon"></ion-icon>
<input type="text" placeholder="Search with filters..." id="filter-search" oninput="toggleClearButton(this)">
<button class="clear-btn" onclick="clearSearch('filter-search')">
<ion-icon name="close-circle-outline"></ion-icon>
</button>
<button class="search-btn" onclick="performSearch('filter-search')">Search</button>
</div>
<div class="filter-chips">
<span class="chip active" onclick="toggleChip(this)">All</span>
<span class="chip" onclick="toggleChip(this)">Images</span>
<span class="chip" onclick="toggleChip(this)">Videos</span>
<span class="chip" onclick="toggleChip(this)">Documents</span>
<span class="chip" onclick="toggleChip(this)">Music</span>
</div>
</div>
</div>
<!-- Search Bar 3: Dropdown -->
<div class="search-section">
<h2 class="section-title">3. Search with Category Dropdown</h2>
<p class="section-description">Advanced search with category selection</p>
<div class="search-bar-3">
<div class="search-wrapper">
<select id="category-select">
<option>All Categories</option>
<option>Products</option>
<option>Services</option>
<option>Articles</option>
<option>Users</option>
</select>
<input type="text" placeholder="What are you looking for?" id="dropdown-search">
<button onclick="performSearch('dropdown-search')">
<ion-icon name="search-outline"></ion-icon>
<span>Search</span>
</button>
</div>
</div>
</div>
<!-- Search Bar 4: Expandable -->
<div class="search-section">
<h2 class="section-title">4. Expandable Search Bar</h2>
<p class="section-description">Space-saving expandable search interface</p>
<div class="search-bar-4">
<div class="expandable-search">
<input type="text" placeholder="Type to search..." id="expandable-search">
<button onclick="toggleExpandableSearch()">
<ion-icon name="search-outline" id="expand-icon"></ion-icon>
</button>
</div>
</div>
</div>
<!-- Search Bar 5: Autocomplete -->
<div class="search-section">
<h2 class="section-title">5. Search with Autocomplete</h2>
<p class="section-description">Smart search with real-time suggestions</p>
<div class="search-bar-5">
<div class="search-container">
<input
type="text"
placeholder="Start typing for suggestions..."
id="autocomplete-search"
oninput="handleAutocomplete(this.value)"
onfocus="handleAutocomplete(this.value)">
<ion-icon name="search-outline" class="search-icon-right"></ion-icon>
<div class="autocomplete-dropdown" id="autocomplete-dropdown"></div>
</div>
</div>
</div>
<!-- Results Container -->
<div class="results-container" id="results-container">
<h3>Search Results:</h3>
<div id="results-content"></div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 60px;
color: #ffffff;
}
header h1 {
font-size: 2.5rem;
font-weight: 300;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
header p {
font-size: 1.1rem;
opacity: 0.9;
}
.search-section {
background: #ffffff;
border-radius: 12px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.section-title {
font-size: 1.3rem;
color: #667eea;
margin-bottom: 10px;
font-weight: 500;
}
.section-description {
color: #666;
margin-bottom: 25px;
font-size: 0.95rem;
}
/* Search Bar 1: Basic Search */
.search-bar-1 {
position: relative;
max-width: 600px;
margin: 0 auto;
}
.search-bar-1 input {
width: 100%;
padding: 16px 50px 16px 20px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
outline: none;
}
.search-bar-1 input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.search-bar-1 button {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: #667eea;
color: #ffffff;
border: none;
width: 40px;
height: 40px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.search-bar-1 button:hover {
background: #5568d3;
}
/* Search Bar 2: With Filter Chips */
.search-bar-2 {
max-width: 700px;
margin: 0 auto;
}
.search-input-wrapper {
position: relative;
margin-bottom: 20px;
}
.search-bar-2 input {
width: 100%;
padding: 16px 120px 16px 50px;
border: 2px solid #e0e0e0;
border-radius: 50px;
font-size: 1rem;
transition: all 0.3s ease;
outline: none;
}
.search-bar-2 input:focus {
border-color: #667eea;
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
}
.search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 1.3rem;
}
.search-bar-2 .clear-btn {
position: absolute;
right: 70px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: #999;
cursor: pointer;
font-size: 1.3rem;
display: none;
padding: 5px;
transition: color 0.3s ease;
}
.search-bar-2 .clear-btn.active {
display: block;
}
.search-bar-2 .clear-btn:hover {
color: #667eea;
}
.search-bar-2 .search-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
border: none;
padding: 10px 24px;
border-radius: 50px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.search-bar-2 .search-btn:hover {
transform: translateY(-50%) scale(1.05);
}
.filter-chips {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.chip {
padding: 8px 16px;
background: #f5f5f5;
border: 2px solid transparent;
border-radius: 20px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.chip:hover {
background: #e8e8e8;
}
.chip.active {
background: #667eea;
color: #ffffff;
border-color: #667eea;
}
/* Search Bar 3: Dropdown Search */
.search-bar-3 {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.search-bar-3 .search-wrapper {
display: flex;
gap: 10px;
background: #ffffff;
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 8px;
transition: all 0.3s ease;
}
.search-bar-3 .search-wrapper:focus-within {
border-color: #667eea;
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
}
.search-bar-3 select {
padding: 10px 15px;
border: none;
background: #f5f5f5;
border-radius: 6px;
font-size: 0.95rem;
cursor: pointer;
outline: none;
color: #333;
}
.search-bar-3 input {
flex: 1;
padding: 10px 15px;
border: none;
font-size: 1rem;
outline: none;
}
.search-bar-3 button {
padding: 10px 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.search-bar-3 button:hover {
transform: scale(1.05);
}
/* Search Bar 4: Expandable Search */
.search-bar-4 {
max-width: 600px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
.expandable-search {
position: relative;
display: flex;
align-items: center;
}
.expandable-search input {
width: 0;
padding: 14px 0;
border: 2px solid #667eea;
border-radius: 50px;
font-size: 1rem;
outline: none;
opacity: 0;
transition: all 0.4s ease;
}
.expandable-search input.expanded {
width: 300px;
padding: 14px 50px 14px 20px;
opacity: 1;
}
.expandable-search button {
position: absolute;
right: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
border: none;
width: 48px;
height: 48px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
transition: all 0.3s ease;
z-index: 1;
}
.expandable-search button:hover {
transform: scale(1.1);
}
/* Search Bar 5: Autocomplete Search */
.search-bar-5 {
max-width: 600px;
margin: 0 auto;
position: relative;
}
.search-bar-5 .search-container {
position: relative;
}
.search-bar-5 input {
width: 100%;
padding: 16px 50px 16px 20px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
outline: none;
}
.search-bar-5 input:focus {
border-color: #667eea;
border-radius: 8px 8px 0 0;
}
.search-bar-5 .search-icon-right {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 1.3rem;
}
.autocomplete-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #ffffff;
border: 2px solid #667eea;
border-top: none;
border-radius: 0 0 8px 8px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
z-index: 10;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.autocomplete-dropdown.active {
max-height: 300px;
overflow-y: auto;
}
.autocomplete-item {
padding: 12px 20px;
cursor: pointer;
transition: background 0.2s ease;
display: flex;
align-items: center;
gap: 12px;
}
.autocomplete-item:hover {
background: #f5f5f5;
}
.autocomplete-item ion-icon {
color: #667eea;
font-size: 1.2rem;
}
.no-results {
padding: 20px;
text-align: center;
color: #999;
}
/* Results Display */
.results-container {
margin-top: 30px;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
display: none;
}
.results-container.active {
display: block;
}
.results-container h3 {
color: #667eea;
margin-bottom: 15px;
}
.result-item {
padding: 15px;
background: #ffffff;
margin-bottom: 10px;
border-radius: 6px;
border-left: 4px solid #667eea;
}
@media (max-width: 768px) {
.search-section {
padding: 25px;
}
header h1 {
font-size: 1.8rem;
}
.search-bar-3 .search-wrapper {
flex-direction: column;
}
.expandable-search input.expanded {
width: 250px;
}
}
// Sample data for autocomplete
const suggestions = [
{ icon: 'document-text-outline', text: 'Angular Material Documentation' },
{ icon: 'code-slash-outline', text: 'Angular Components' },
{ icon: 'settings-outline', text: 'Configuration Guide' },
{ icon: 'book-outline', text: 'Getting Started Tutorial' },
{ icon: 'bulb-outline', text: 'Best Practices' },
{ icon: 'people-outline', text: 'Community Resources' },
{ icon: 'rocket-outline', text: 'Performance Optimization' },
{ icon: 'shield-checkmark-outline', text: 'Security Guidelines' }
];
function performSearch(inputId) {
const input = document.getElementById(inputId);
const query = input.value.trim();
if (query) {
const resultsContainer = document.getElementById('results-container');
const resultsContent = document.getElementById('results-content');
resultsContent.innerHTML = `
<div class="result-item">
<strong>Search Query:</strong> "${query}"
</div>
<div class="result-item">
<strong>Results found:</strong> ${Math.floor(Math.random() * 100) + 1} items
</div>
<div class="result-item">
<strong>Search Type:</strong> ${inputId.replace('-', ' ').toUpperCase()}
</div>
`;
resultsContainer.classList.add('active');
// Scroll to results
resultsContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}
function toggleClearButton(input) {
const clearBtn = input.nextElementSibling;
if (input.value.length > 0) {
clearBtn.classList.add('active');
} else {
clearBtn.classList.remove('active');
}
}
function clearSearch(inputId) {
const input = document.getElementById(inputId);
input.value = '';
input.focus();
toggleClearButton(input);
}
function toggleChip(chip) {
const chips = chip.parentElement.querySelectorAll('.chip');
chips.forEach(c => c.classList.remove('active'));
chip.classList.add('active');
}
function toggleExpandableSearch() {
const input = document.getElementById('expandable-search');
const icon = document.getElementById('expand-icon');
if (input.classList.contains('expanded')) {
if (input.value.trim()) {
performSearch('expandable-search');
} else {
input.classList.remove('expanded');
icon.setAttribute('name', 'search-outline');
}
} else {
input.classList.add('expanded');
input.focus();
icon.setAttribute('name', 'arrow-forward-outline');
}
}
function handleAutocomplete(value) {
const dropdown = document.getElementById('autocomplete-dropdown');
if (value.length === 0) {
dropdown.classList.remove('active');
return;
}
const filtered = suggestions.filter(item =>
item.text.toLowerCase().includes(value.toLowerCase())
);
if (filtered.length > 0) {
dropdown.innerHTML = filtered.map(item => `
<div class="autocomplete-item" onclick="selectSuggestion('${item.text}')">
<ion-icon name="${item.icon}"></ion-icon>
<span>${item.text}</span>
</div>
`).join('');
dropdown.classList.add('active');
} else {
dropdown.innerHTML = '<div class="no-results">No suggestions found</div>';
dropdown.classList.add('active');
}
}
function selectSuggestion(text) {
const input = document.getElementById('autocomplete-search');
input.value = text;
document.getElementById('autocomplete-dropdown').classList.remove('active');
performSearch('autocomplete-search');
}
// Close autocomplete when clicking outside
document.addEventListener('click', (e) => {
const searchBar5 = document.querySelector('.search-bar-5');
if (searchBar5 && !searchBar5.contains(e.target)) {
document.getElementById('autocomplete-dropdown').classList.remove('active');
}
});
// Handle enter key for all search bars
document.querySelectorAll('input[type="text"]').forEach(input => {
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
performSearch(input.id);
}
});
});
// Close expandable search when clicking outside
document.addEventListener('click', (e) => {
const expandableSearch = document.querySelector('.expandable-search');
const input = document.getElementById('expandable-search');
if (expandableSearch && !expandableSearch.contains(e.target) && input.classList.contains('expanded')) {
input.classList.remove('expanded');
document.getElementById('expand-icon').setAttribute('name', 'search-outline');
}
});
No comments yet. Be the first!