当您没有进入搜索栏时，为什么我的搜索项不隐藏？
[英]Why don't my search items hide when you're not tabbed into the search bar?
问题描述
I have a search bar on my website with a bunch of random pages, but the problem is that the search items aren't hidden when you're not on the search bar.
我的网站上有一个带有一堆随机页面的搜索栏，但问题是当您不在搜索栏上时，搜索项不会隐藏。 Is that a function of HTML or would it require javascript.这是 HTML 的功能还是需要 javascript。 I'm really new to html, javascript, and css so details would be appreciated.我对 html、javascript 和 css 真的很陌生，因此将不胜感激。
The website and code are here:网站和代码在这里：
function search() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("pgsearchbar").value; filter = input.toUpperCase(); ul = document.getElementById("searchitems"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { finder = li[i].getElementsByTagName("a")[0]; letter = finder.textContent || finder.innerText; if (letter.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } let counter = 0; function increment() { counter++; document.querySelector("#counter").innerHTML = counter; } function PlaySound(soundObj) { var audio = document.getElementById(soundObj); if (audio.paused){ audio.play(); } else{ audio.currentTime = 0; } } function reset() { document.querySelector("#counter").innerHTML = 0; counter = 0; }
.pageselector { position:absolute; bottom:10%; left:45%; } .banner { background-image:url("sky.jpg"); padding:60px; color:lightblue; } .banntxt { font-size:50px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; font-family:"Faster One"; } .navbar-brand { font-family:"Faster One"; font-size:25px; } li { margin:3px 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="styles.css" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One"> <title>My Webpage</title> </head> <body> <div> <div class="banner"> <h1 class="banntxt">abcdefghijklmnop</h1> </div> <nav class="navbar navbar-light" style="background-color: #e3f2fd;"> <span class="navbar-brand mb-0 h1">ABC</span> <h2 style="font-size:26px;">Contact us at: abcdefgh@gmail.com | ###-####-####</h2> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul id="navbaritems" class="navbar-nav"> <li class="nav-item active"> <button type="button" class="btn btn-info disabled">Home</a> </li> <li class="nav-item"> <button onclick="window.location.href='#';" type="button" class="btn btn-info">About me</a> </li> <li class="nav-item"> <button onclick="window.location.href='#';" type="button" class="btn btn-info">Blah</a> </li> <li> <form class="form-inline"> <input id="pgsearchbar" class="form-control mr-sm-2" type="search" onkeyup="search()" placeholder="Search" aria-label="Search"> <ul id="searchitems"> <li> <a href="index.html">Homepage</a> </li> <li> <a href="#">About Me</a> </li> <li> <a href="page2.html">Page2</a> </li> <li> <a href="page3.html">Page3</a> </li> <li> <a href="page3.html">Page4</a> </li> </ul> <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button> </form> </li> </ul> </div> </nav> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script type="text/javascript" src="functions.js"></script> <audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true"> <audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true"> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2020-08-24 06:48:35
I added #searchitems li { display: none; }我添加了#searchitems li { display: none; } #searchitems li { display: none; } to hide search items at first. #searchitems li { display: none; }首先隐藏搜索项。 Then using input.length === 0 we check if search input value is empty then hide all search items else show them by li[i].style.display = "list-item" .然后使用input.length === 0我们检查搜索输入值是否为空然后隐藏所有搜索项， else通过li[i].style.display = "list-item"显示它们。 I changed if/else order.我改变了if/else顺序。
function search() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("pgsearchbar").value; filter = input.toUpperCase(); ul = document.getElementById("searchitems"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { finder = li[i].getElementsByTagName("a")[0]; letter = finder.textContent || finder.innerText; if (input.length === 0 || letter.toUpperCase().indexOf(filter) === -1) { li[i].style.display = "none"; } else { li[i].style.display = "list-item"; } } } let counter = 0; function increment() { counter++; document.querySelector("#counter").innerHTML = counter; } function PlaySound(soundObj) { var audio = document.getElementById(soundObj); if (audio.paused){ audio.play(); } else{ audio.currentTime = 0; } } function reset() { document.querySelector("#counter").innerHTML = 0; counter = 0; }
.pageselector { position:absolute; bottom:10%; left:45%; } .banner { background-image:url("sky.jpg"); padding:60px; color:lightblue; } .banntxt { font-size:50px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; font-family:"Faster One"; } .navbar-brand { font-family:"Faster One"; font-size:25px; } li { margin:3px 0; } #searchitems li { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="styles.css" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One"> <title>My Webpage</title> </head> <body> <div> <div class="banner"> <h1 class="banntxt">abcdefghijklmnop</h1> </div> <nav class="navbar navbar-light" style="background-color: #e3f2fd;"> <span class="navbar-brand mb-0 h1">ABC</span> <h2 style="font-size:26px;">Contact us at: abcdefgh@gmail.com | ###-####-####</h2> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul id="navbaritems" class="navbar-nav"> <li class="nav-item active"> <button type="button" class="btn btn-info disabled">Home</a> </li> <li class="nav-item"> <button onclick="window.location.href='#';" type="button" class="btn btn-info">About me</a> </li> <li class="nav-item"> <button onclick="window.location.href='#';" type="button" class="btn btn-info">Blah</a> </li> <li> <form class="form-inline"> <input id="pgsearchbar" class="form-control mr-sm-2" type="search" onkeyup="search()" placeholder="Search" aria-label="Search"> <ul id="searchitems"> <li> <a href="index.html">Homepage</a> </li> <li> <a href="#">About Me</a> </li> <li> <a href="page2.html">Page2</a> </li> <li> <a href="page3.html">Page3</a> </li> <li> <a href="page3.html">Page4</a> </li> </ul> <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button> </form> </li> </ul> </div> </nav> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script type="text/javascript" src="functions.js"></script> <audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true"> <audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true"> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么我的搜索栏及其功能无法显示/工作？ - Why won't my search bar and its functionality be displayed/work?
清除搜索字段时如何隐藏项目？ - How to hide items when search field is cleared?
为什么我的搜索栏功能不正常 - Why is my search bar functioning improperly
我想使用 javascript 在我的网页中隐藏搜索栏 - I want to hide the search bar in my webpage using javascript
点击javascript之前，不显示搜索栏 - Don't show search bar until clicked on javascript
如何筛选出不属于搜索结果的jquery项目？ - How to filter out items in jquery that don't belong in search results?
jQuery DataTables：隐藏搜索栏 - jQuery DataTables: hide search bar
页面重新加载时没有呈现任何项目 - 尝试实现搜索栏 - No items being rendered when the page reloads - trying to implement a search bar
为什么当我删除搜索字段中的输入过快时结果不会消失？ (Javascript) - Why the results don't disappear when I delete too fast the input in the search field? (Javascript)
当我使用它进行搜索时，我的点击不要一直返回错误 - Don't my click Keeps returning a false when I use it to search
相关标签