Html Question posted in
Some basic documentation can be found here.

Html – How do I make this search bar drop down vertical?

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    If brett’s responses is not working for you then try this. Addition to brett’s code I haved added display:flex with flex-direction: column to #suggestions:has(li) which should force it to align vertically. Also brett’s response was working fine in my system.

    Below is working example.

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .mainDiv {
            color: white;
            width: 100%;
            height: 100vh;
            background-color: #1e1e1e;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        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;
            display:flex;
        }

        #suggestions:has(li) {
            display: flex;
            flex-direction: column;
        }

        #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;
        }
    </style>
</head>

<body>

    <div class="mainDiv">
        <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>


    </div>

    <script>
        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));
            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 = "";
        }
    });
});
    </script>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search