advanced-search-library
Version:
Intelligent search library with typo correction, autocomplete, and flexible data structure support
136 lines (121 loc) • 6.58 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Search Library - Demo</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="header-content">
<h1><i class="fas fa-search"></i> Advanced Search Library</h1>
<p class="subtitle">Intelligent search with typo correction and flexible data structures</p>
</div>
</header>
<main class="main-content">
<!-- Search Section -->
<section class="search-section">
<div class="search-container">
<div class="search-box">
<input
type="text"
id="searchInput"
class="search-input"
placeholder="Search products... (try: coffee, phone, drum)"
autocomplete="off"
>
<button id="searchButton" class="search-button">
<i class="fas fa-search"></i>
</button>
<div id="autocompleteContainer" class="autocomplete-container"></div>
</div>
<div class="search-tips">
<span class="tip-label">💡 Try these:</span>
<span class="tip-item" onclick="demo.searchInput.value='cofee'; demo.currentQuery='cofee'; demo.performSearch();">cofee (typo)</span>
<span class="tip-item" onclick="demo.searchInput.value='drum set'; demo.currentQuery='drum set'; demo.performSearch();">drum set</span>
<span class="tip-item" onclick="demo.searchInput.value='gaming'; demo.currentQuery='gaming'; demo.performSearch();">gaming</span>
</div>
</div>
</section>
<div class="content-grid">
<!-- Filters Section -->
<aside class="filters-section">
<div class="filters-container">
<h3><i class="fas fa-filter"></i> Filters</h3>
<div class="filter-group">
<label for="categoryFilter">Category</label>
<select id="categoryFilter">
<option value="">All Categories</option>
</select>
</div>
<div class="filter-group">
<label>Price Range ($)</label>
<div class="price-inputs">
<input type="number" id="priceMin" placeholder="Min">
<input type="number" id="priceMax" placeholder="Max">
</div>
</div>
<div class="filter-group">
<label for="sortSelect">Sort By</label>
<select id="sortSelect">
<option value="relevance">Relevance</option>
<option value="price_asc">Price: Low to High</option>
<option value="price_desc">Price: High to Low</option>
<option value="name_asc">Name: A to Z</option>
<option value="rating_desc">Rating: High to Low</option>
</select>
</div>
<button id="clearFilters" class="clear-filters-btn">
<i class="fas fa-times"></i> Clear Filters
</button>
</div>
<!-- Statistics -->
<div class="stats-container">
<h3><i class="fas fa-chart-bar"></i> Statistics</h3>
<div id="statsContainer" class="stats-content">
<!-- Stats will be populated by JavaScript -->
</div>
</div>
<!-- Search History -->
<div class="history-container">
<h3><i class="fas fa-history"></i> Search History</h3>
<div id="historyContainer" class="history-content">
<!-- History will be populated by JavaScript -->
</div>
</div>
</aside>
<!-- Results Section -->
<section class="results-section">
<div class="results-header">
<h2 id="resultsTitle">All Products</h2>
<span id="resultsCount" class="results-count">0 results</span>
</div>
<div id="resultsContainer" class="results-container">
<!-- Results will be populated by JavaScript -->
</div>
</section>
</div>
</main>
<footer class="footer">
<div class="footer-content">
<p>© 2025 <a href="https://github.com/Ridvan0" target="_blank" style="color: #007acc; text-decoration: none;">Rıdvan Sevindik</a>. MIT License.</p>
<div class="footer-links">
<a href="https://github.com/Ridvan0" target="_blank">
<i class="fab fa-github"></i> GitHub
</a>
<a href="https://www.linkedin.com/in/ridvansevindik/" target="_blank">
<i class="fab fa-linkedin"></i> LinkedIn
</a>
</div>
</div>
</footer>
</div>
<!-- Include library and sample data -->
<script src="../src/AdvancedSearch.js"></script>
<script src="../src/data/sampleData.js"></script>
<script src="app.js"></script>
</body>
</html>