CODEWITHSUNDEEP
javascripthtmlcsscs50
meematz
meematz

Reputation: 127

Search bar in website doesnt work as intended

I'm making a quick website for the web track in cs50, but I'm having a problem with my searchbar feature. I'm trying to make it so when you click on the search bar, a list of items will appear (home, page2, page3, page4). The JS function attached is also supposed to make it so when you type in corresponding letters to the list of options, the option with matching letters will remain while the ones without matching letters will disappear. When I run the code on the website, it doesnt work at all. Code snippet and image is attached.

Summary: Question 1 - Why is'nt the code hiding the results without the right letters?

Question 2 - Why is'nt the code hiding all list options when i'm not selected onto it?

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";
        }
    }
}
.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;
}
<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: [email protected] | ###-####-####</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 class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" style="color:grey;">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="abme.html" style="color:black;">About me</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" style="color:black;">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="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>
        <div style="position:absolute; bottom:10%; left:48.04%;">
            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                <div class="btn-group" role="group">
                    <button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Page 1
                    </button>
                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item disabled">1</a>
                        <a class="dropdown-item" href="page2.html">2</a>
                        <a class="dropdown-item" href="page3.html">3</a>
                        <a class="dropdown-item" href="page4.html">4</a>

                    </div>
                </div>
                <button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
            </div>
        </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>

    </body>
</html>

What it looks like:

enter image description here

Upvotes: 0

Views: 76

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

You have an error in your html. Change this line from:

<input id="pgsearchbar" class="form-control mr-sm-2" type="search" onkeyup"search()" placeholder="Search" aria-label="Search">
                                                                        ^^^^

to:

<input id="pgsearchbar" class="form-control mr-sm-2" type="search" onkeyup="search()" placeholder="Search" aria-label="Search">
                                                                         ^^^^


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";
    }
}
}
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  
  
  <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: [email protected] | ###-####-####</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 class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" style="color:grey;">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="abme.html" style="color:black;">About me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" style="color:black;">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="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>
<div style="position:absolute; bottom:10%; left:48.04%;">
    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
        <div class="btn-group" role="group">
            <button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Page 1
            </button>
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <a class="dropdown-item disabled">1</a>
                <a class="dropdown-item" href="page2.html">2</a>
                <a class="dropdown-item" href="page3.html">3</a>
                <a class="dropdown-item" href="page4.html">4</a>

            </div>
        </div>
        <button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
    </div>
</div>

Upvotes: 1

EugenSunic
EugenSunic

Reputation: 13703

You are missing your event listener on input

document.getElementById('pgsearchbar').addEventListener('input', ()=>{
search()
})

Fiddle example: https://jsfiddle.net/bg8wyrhz/

Upvotes: 1

Related Questions