ThePackDevs
/
4W-merch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update search-script.js

main
kami 2024-08-10 02:13:28 +00:00
parent 0890e90aef
commit 2e898ce357
1 changed files with 193 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
search-script.js
View File

@ -1,54 +1,3 @@
<!-- HTML for Search Icon and Search Bar -->
<div class="header__icon--search">🔍 Click to search</div>
<div id="search-bar" style="display: none;">
<input type="text" id="search-input" placeholder="Search products..." />
<div id="search-results" class="search-results"></div>
</div>
<style>
/* CSS for search bar styling */
.search-result-item {
display: flex;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.search-result-image {
width: 60px;
height: 60px;
object-fit: cover;
margin-right: 10px;
}
.search-result-info {
flex: 1;
}
.search-result-meta {
display: flex;
justify-content: space-between;
font-size: 0.9em;
color: #555;
}
#search-bar.active {
display: block;
}
#search-bar {
margin-top: 10px;
}
.search-results {
max-height: 300px;
overflow-y: auto;
margin-top: 10px;
}
.header__icon--search {
cursor: pointer;
padding: 10px;
border: 1px solid #ccc;
display: inline-block;
margin-top: 20px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Define product type keywords and their standardized forms
const productTypes = {
@ -261,4 +210,3 @@
searchBar.querySelector('input').focus();
});
});
</script>