如何让这个搜索栏垂直下拉？

Question

我似乎一生都无法弄清楚这一点，我最近才开始学习编码，所以我发现了一些答案，我只是不知道如何用它们替换我当前的代码，有些有我想要的东西还没有学会，然后 chatgpt 似乎永远无法修复它或向我展示如何将我找到的答案正确地集成到我的完整脚本中。

.html 片段

 <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 片段

#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 片段

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

我用谷歌搜索，尝试将工作脚本集成到我自己的完整脚本中，向 chatpgt 寻求帮助，观看 YouTube 视频。尝试使用填充、包裹或不包裹，使下拉更大。我得到的关闭是当我将

<ul id="suggestions" class="suggestions"></ul>

移出标题时，但这只会导致整个页面出现一条奇怪的线，将搜索栏移至部分屏幕之外，单击时使其变为屏幕大小，但搜索建议确实是垂直出现的……只是不是我想要的。

Answer 1

您实际上不需要做任何事情。据我所知，它已经可以工作了。我已经清理了一些，但在我这样做之前它就可以工作了。

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;
}

.logo img {
  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: 5px 10px; 
  margin: 0; 
  list-style-type: none; 
  box-sizing: border-box;
  display: none;
}

#suggestions:has(li) {
  display: block;
}

#suggestions li {
  padding: 5px 0;
  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>