Как сделать так, чтобы панель поиска располагалась вертикально?
Кажется, я не могу понять это хоть убей, я только недавно начал учиться программировать, поэтому нашел некоторый ответ, я просто не знал, как заменить ими мой текущий код, а у некоторых были вещи, которых у меня нет. Я еще не научился, и потом, кажется, что
.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.info("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 = "";
}
});
});
Я гуглил, пытался интегрировать рабочие сценарии в свой собственный полный сценарий, просил помощи у чатпгта, смотрел видео на YouTube. Поигрался с отступами, с оберткой или без нее, увеличивая раскрывающийся список. Закрытие, которое я получил, произошло, когда я переместил <ul id = "suggestions" class = "suggestions"></ul> из заголовка, но это просто вызвало появление странной линии на всей странице, переместило панель поиска частично за пределы экрана и при нажатии сделало ее размером с экран, но поисковые предложения сделали это зайди вертикально... но это не то, что я искал.
как это выглядит в действии на данный момент: Панель поиска с предложениями по горизонтали
скриншот добавлен, спасибо за предложение по вопросу
скриншот добавлен, спасибо за предложение по вопросу
Ответы 4
Вам действительно не нужно ничего делать. Насколько я вижу, это уже работает. Я немного почистил его, но до этого он работал. Просто убедитесь, что вы вводите «a», «b» или «c» в поле поиска.
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.info("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>Странно, что мой по-прежнему остается горизонтальным... Если бы я мог, я бы добавил картинку, чтобы показать, как он выглядит.
Вы можете отредактировать свое сообщение, включив в него изображение… и да, вам следует это сделать. Продолжайте совершенствовать свой вопрос, пока он не станет настолько хорошим, насколько это возможно.
спасибо, я добавил изображение, чтобы показать, как оно выглядит
Используйте инспектор браузера, чтобы увидеть, какие правила стиля применяются к #suggestions и его li дочерним элементам. Один из них, вероятно, наследует правило откуда-то еще. Например, применимо ли что-то display: flex к #suggestions? Если да, вы можете переопределить это с помощью display: block или использовать flex и просто добавить flex-direction: column.
спасибо, это исправлено, после того, как вы сказали, что это может наследовать правило, я понял, что панель поиска является частью заголовка, который имеет горизонтальный стиль, поэтому добавление <display:block> исправило это
Хорошо, теперь наша задача — улучшить этот пост (ваш вопрос), чтобы он имел смысл для тех, кто придет после нас. На благо общества. Можете ли вы отредактировать свое сообщение, включив в него код соответствующих стилей заголовков, которые, будучи унаследованными, в первую очередь вызвали проблему? Таким образом, код в вашем сообщении можно будет использовать для демонстрации проблемы, которую вы описываете. Затем я исправлю свой ответ, чтобы сократить его и четко указать на проблему.
Вам действительно не нужно ничего делать. Насколько я вижу, это уже работает. Я немного почистил его, но до этого он работал. Просто убедитесь, что вы вводите «a», «b» или «c» в поле поиска.
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.info("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>Странно, что мой по-прежнему остается горизонтальным... Если бы я мог, я бы добавил картинку, чтобы показать, как он выглядит.
Вы можете отредактировать свое сообщение, включив в него изображение… и да, вам следует это сделать. Продолжайте совершенствовать свой вопрос, пока он не станет настолько хорошим, насколько это возможно.
спасибо, я добавил изображение, чтобы показать, как оно выглядит
Используйте инспектор браузера, чтобы увидеть, какие правила стиля применяются к #suggestions и его li дочерним элементам. Один из них, вероятно, наследует правило откуда-то еще. Например, применимо ли что-то display: flex к #suggestions? Если да, вы можете переопределить это с помощью display: block или использовать flex и просто добавить flex-direction: column.
спасибо, это исправлено, после того, как вы сказали, что это может наследовать правило, я понял, что панель поиска является частью заголовка, который имеет горизонтальный стиль, поэтому добавление <display:block> исправило это
Хорошо, теперь наша задача — улучшить этот пост (ваш вопрос), чтобы он имел смысл для тех, кто придет после нас. На благо общества. Можете ли вы отредактировать свое сообщение, включив в него код соответствующих стилей заголовков, которые, будучи унаследованными, в первую очередь вызвали проблему? Таким образом, код в вашем сообщении можно будет использовать для демонстрации проблемы, которую вы описываете. Затем я исправлю свой ответ, чтобы сократить его и четко указать на проблему.
Если ответы Бретта вас не устраивают, попробуйте это. В дополнение к коду Бретта я добавил display:flex с flex-direction: column к #suggestions:has(li), что должно заставить его выравниваться по вертикали. Кроме того, ответ Бретта работал нормально в моей системе.
Ниже приведен рабочий пример.
<!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>Если ответы Бретта вас не устраивают, попробуйте это. В дополнение к коду Бретта я добавил display:flex с flex-direction: column к #suggestions:has(li), что должно заставить его выравниваться по вертикали. Кроме того, ответ Бретта работал нормально в моей системе.
Ниже приведен рабочий пример.
<!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>
Что это означает «Хочу, чтобы панель поиска раскрывалась вертикально»? Он уже вертикальный, прикрепите скриншот или что-нибудь в этом роде.