当您不在选项卡中时，为什么我的搜索项没有隐藏？

时间：2020-08-24 06:16:04

标签： javascript html css

我的网站上有一个搜索栏，其中有一堆随机页面，但是问题是，当您不在搜索栏中时，搜索项不会被隐藏。这是HTML的功能还是需要JavaScript？我真的是html，javascript和css的新手，所以请多多关注。

网站和代码在这里：

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 个答案:

答案 0 :(得分：1)

我首先添加了#searchitems li { display: none; }以隐藏搜索项。 然后使用input.length === 0检查搜索输入值是否为空，然后隐藏所有搜索项目else，并按li[i].style.display = "list-item"显示它们。我更改了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>

相关问题
最新问题