0

JavaScript

window.addEventListener("onload", function(e){
    document.querySelector('searchbar').addEventListener('click', search_album()) //adds a listener for the click event, which runs the function search_album()
    document.querySelector('searchbar').addEventListener('blur', hide_results()) //adds a listener for the blur event, where the user loses focus from the input field, running the function hide_results()
});

function search_album() { //function to find the album via search bar
    let input = document.getElementById('searchbar').value //input is the searchbar value
    input = input.toLowerCase(); //turned into lowercase
    let x = document.getElementsByClassName('albums'); // and x is the list of albums with the same class name

    for (i = 0; i < x.length; i++){ //looping around for the number of albums in the list found in the php page
        if (!x[i].innerHTML.toLowerCase().includes(input)) { //checking that the value entered is not found in the list of albums in the php page
            //do not display the list of items that matches
        }
        else{
            x[i].style.display = 'list-item'; //display the list of items that matches
        }
    }
}

function hide_results() { //function to run when the user click anywhere else in the page, not in the input field
    let listItems = document.getElementById('list');
    listItems.style.display = 'none'; //hide the results list
    document.getElementById("searchbar").value = ""; //empty input field
}

HTML Code

<input id="searchbar" type="text" name="search" placeholder="Search Something..."
    onkeyup="search_album()" onblur="hide_results()">

    <ol id="list">
        <li class="albums" id="#red"><a href="#red" class="link">Red - Taylor Swift</a></li>
        <li class="albums" id="#allartists"><a href="artists.php" class="link">All Artists</a></li>
        <li class="albums" id="#allalbums"><a href="albums.php" class="link">All Albums of all Artists</a></li>
        <li class="albums" id="#taylor"><a href="taylorswift.php" class="link">About Taylor Swift</a></li>
        <li class="albums" id="#taylor"><a href="tayloralbums.php" class="link">Taylor Swift Albums</a></li>
        <li class="albums" id="#gigs"><a href="gigs.php" class="link">Upcoming GIGS</a></li>
    </ol>

I was trying to make a searchbar so the user could enter any key and matching results would start to show up based on if the letter they entered is found in the word, hiding the results when the user clicks outside of the searchbar, showing the results again if inputting letters again, and allowing this process to repeat.

Alexios
  • 1
  • 2
  • Are you sure you want `#` in `id="#red"` and the others? Shouldn't those be just `id="red"` etc? – brombeer Dec 26 '22 at 14:59
  • I tried removing them but the links would not work either way. – Alexios Dec 26 '22 at 15:01
  • You should not have the `()` after the callback function in `addEventListener()`. See https://stackoverflow.com/questions/29526556/javascript-onclick-function-is-called-immediately-not-when-clicked – Barmar Dec 26 '22 at 16:44
  • Don't use both `addEventListener()` and `onXXX` for the same event. It will run `hide_results()` twice. – Barmar Dec 26 '22 at 16:45
  • There's no PHP in the PHP code, it's just plain HTML. The fact that it comes from a PHP script is irrelevant. – Barmar Dec 26 '22 at 16:47
  • What do you expect clicking on the links to do? The `href` points to the `li` that contains the same link. – Barmar Dec 26 '22 at 16:49
  • @Barmar I have some IDs throughout my main page where it can scroll down to it as they are on the same page, other links have a redirect, they are a different page on their own, so I was expecting to use the hrefs in the HTML page to redirect to them. – Alexios Dec 26 '22 at 17:06
  • 1
    IDs have to be unique. Don't use the same IDs that you want to scroll to in the `
  • ` that contains the links.
    • – Barmar Dec 26 '22 at 17:07
  • @Barmar what I have seen is that it looks like it is actually running the function twice, because when I re-click on the input field, it just does not do anything. I tried removing the onblur from the HTML, but now the function to hide the results does not run at all. – Alexios Dec 26 '22 at 17:07
  • @Alexios That's because of the `()` in the `addEventListener()` that I mentioned in my first comment. – Barmar Dec 26 '22 at 17:09
  • I have removed it from the addEventListeners at the top now. – Alexios Dec 26 '22 at 17:11