I seem to not be able to figure this out for the life of me, I just started to learn to code recently so some answer I have found I just didn't know how to replace my current code with them and some had things I haven't learned yet, and then chatgpt never seems to be able to fix it or show me how to integrate answers I find into my full scripts properly.
.html snip
<header>
<nav>
<div class="logo">
<a href="A.html">
<img src="logo.png" alt="Logo" style="height: 50px;">
</a>
</div>
<ul>
<li><a href="A.html">A</a></li>
<li><a href="B.html">B</a></li>
<li><a href="C.html">C</a></li>
<li style="flex-grow: 1; position: relative;">
<input type="text" id="search-bar" placeholder="Search..." autocomplete="off" style="width: 100%;">
<ul id="suggestions" class="suggestions"></ul>
</li>
</ul>
</nav>
</header>
.css snip
#search-bar {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
#suggestions {
border: 1px solid #ccc;
border-top: none;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
background-color: #fff;
position: absolute;
width: calc(100% - 12px);
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
left: 0;
padding: 0;
margin: 0;
list-style-type: none;
}
#suggestions li {
padding: 10px;
cursor: pointer;
list-style: none;
color: #000;
text-align: left;
white-space: nowrap;
font-size: 12px;
display: block;
width: 100%;
box-sizing: border-box;
}
#suggestions li:hover {
background-color: #f0f0f0;
}
.js snip
document.addEventListener("DOMContentLoaded", () => {
const searchBar = document.getElementById("search-bar");
const suggestions = document.getElementById("suggestions");
const pages = [
{ name: "A", url: "A.html" },
{ name: "B", url: "B.html" },
{ name: "C", url: "C.html" },
];
searchBar.addEventListener("input", (e) => {
const query = e.target.value.toLowerCase();
suggestions.innerHTML = "";
if (query) {
const filteredPages = pages.filter(page => page.name.toLowerCase().includes(query));
console.log("Filtered Pages:", filteredPages);
filteredPages.forEach(page => {
const suggestionItem = document.createElement("li");
suggestionItem.textContent = page.name;
suggestionItem.addEventListener("click", () => {
window.location.href = page.url;
});
suggestions.appendChild(suggestionItem);
});
}
});
// Handle enter key press
searchBar.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
const query = searchBar.value.toLowerCase();
const matchedPage = pages.find(page => page.name.toLowerCase() === query);
if (matchedPage) {
window.location.href = matchedPage.url;
}
}
});
document.addEventListener("click", (e) => {
if (!searchBar.contains(e.target) && !suggestions.contains(e.target)) {
suggestions.innerHTML = "";
}
});
});
I have googled, attempted to integrate working scripts into my own full script, asked chatpgt for help, watch youtube videos. Played around with padding, with, wrap or no wrap, making the drop down bigger. the closes I got was when I moved <ul id="suggestions" class="suggestions"></ul> out of the header but that just caused the a weird line through the entire page, moved the search bar to partially off the screen and when clicked made it the size of the screen but the search suggestions did come in vertically... just not what I was looking for.
what it looks like in action currently: search bar with suggestions horizontally
You don’t really need to do anything. It works already, as far as I can see. I have cleaned it up a bit, but it was working before I did that. Just make sure that you type either ‘a’, ‘b’ or ‘c’ into the search box.
document.addEventListener("DOMContentLoaded", () => {
const searchBar = document.getElementById("search-bar");
const suggestions = document.getElementById("suggestions");
const pages = [
{ name: "A", url: "A.html" },
{ name: "AA", url: "AA.html" },
{ name: "AAA", url: "AAA.html" },
{ name: "B", url: "B.html" },
{ name: "BB", url: "BB.html" },
{ name: "BBB", url: "BBB.html" },
{ name: "C", url: "C.html" },
{ name: "CC", url: "CC.html" },
{ name: "CCC", url: "CCC.html" },
];
searchBar.addEventListener("input", (e) => {
const query = e.target.value.toLowerCase();
suggestions.innerHTML = "";
if (query) {
const filteredPages = pages.filter(page => page.name.toLowerCase().includes(query));
console.log("Filtered Pages:", filteredPages);
filteredPages.forEach(page => {
const suggestionItem = document.createElement("li");
suggestionItem.textContent = page.name;
suggestionItem.addEventListener("click", () => {
window.location.href = page.url;
});
suggestions.appendChild(suggestionItem);
});
}
});
// Handle enter key press
searchBar.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
const query = searchBar.value.toLowerCase();
const matchedPage = pages.find(page => page.name.toLowerCase() === query);
if (matchedPage) {
window.location.href = matchedPage.url;
}
}
});
document.addEventListener("click", (e) => {
if (!searchBar.contains(e.target) && !suggestions.contains(e.target)) {
suggestions.innerHTML = "";
}
});
});header, nav {
display: flex;
gap: 1em;
align-items: center;
}
header {
justify-content: space-between;
background: aliceblue;
padding-right: 1em;
}
.logo img {
display: block;
height: 50px;
}
.search-widget {
position: relative;
}
#search-bar {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
#suggestions {
border: 1px solid #ccc;
border-top: 0;
width: calc(100% - 8px);
position: absolute;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
left: 4px;
padding: 0;
margin: 0;
list-style-type: none;
box-sizing: border-box;
background: white;
display: none;
}
#suggestions:has(li) {
display: block;
}
#suggestions li {
padding: 8px 10px;
cursor: pointer;
list-style: none;
color: #000;
text-align: left;
white-space: nowrap;
font-size: 12px;
display: block;
width: 100%;
box-sizing: border-box;
}
#suggestions li:hover {
background-color: #f0f0f0;
}<header>
<a class="logo" href="A.html">
<img src="https://picsum.photos/100">
</a>
<nav>
<a href="A.html">A</a></li>
<a href="B.html">B</a></li>
<a href="C.html">C</a></li>
<span class="search-widget">
<input type="text" id="search-bar" placeholder="Search..." autocomplete="off" size="15">
<ul id="suggestions" class="suggestions"></ul>
</span>
</nav>
</header>