The code broken down.
In this blog post, I’m going to break down each part of the code and explain what is going on.
1. How to turn values entered into the search bar, into lowercase 🧍🏼
document.getElementById('searchInput').addEventListener('keyup', function(event) {let searchQuery = event.target.value.toLowerCase(); console.log(searchQuery); })
1.1 document.getElementById(‘searchInput’)
grabs the html element (in this case it is the search bar input).
1.2 .addEventListener(‘keyup’, function() { })
An eventlistener is then appended to the end of the document – the eventlistener is “keyup”.
1.3 document.getElementById(‘searchInput’).addEventListener(‘keyup’, function(event) { let searchQuery = event.target.value.toLowerCase();
})
‘event’ is placed in the function parameter – within the function body a variable is assigned to event.target.value.toLowerCase(); this reads….
event.target gives you the element that triggered the event.
So, event.target.value retrieves the value of that element (an input field, in your example)…..
.toLowerCase then transforms what is entered into the search bar into lower case.
1.4 document.getElementById(‘searchInput’).addEventListener(‘keyup’, function(event) { let searchQuery = event.target.value.toLowerCase(); console.log(searchQuery); })
Finally searchQuery is logged to the console – which shows that whatever ever is typed into the search bar , whether in uppercase or lower, the console will log out that word in lower case.
2. HOW TO GET NAMES FROM THE DOM: (HTML COLLECTION)❓
FYI this is what the html page looks like ⬆️.
document.getElementById(“searchInput”).addEventListener(“keyup”, function(event) { let searchQuery = event.target.value.toLowerCase();
// the below code has been added inside of the above function
let allNamesDOMCollection = document.getElementsByClassName(‘name’); console.log(allNamesDOMCollection[0].textContent); });
2.1
First of all, a variable is declared allNamesDOMCollection which then has been assigned with the html elements (which is the list of names). This is done through ‘get elements by class name’.
2.2
Next we have logged to the console the variable and indexed 0, to get the first value. textContent has then been appended on to the end, which returns the elements without the tags.
The textContent property returns:
“The text content of the element and all descendaces, with spacing and CSS hidden text, but without tags.”
ref: https://www.w3schools.com/jsref/prop_node_textcontent.asp
3. For Loops 😵💫
4. COMPARING THE SEARCH QUERY WITH THE DOM NAMES 🤺
if (currentName.includes(searchQuery)) { (4.1) allNamesDOMCollection[counter].style.display = “block”; (4.2) } else { (4.3) allNamesDOMCollection[counter].style.display = “none”; (4.4) } }
4.1 If the currentName matches whats been typed into the search bar (searchQuery) …..
4.2 We need to change the display style to block. This is done through going into the list item of the allNamesDomCollection[counter] and mosfying the display to only show the match(es).
4.3 Otherwise this needs to happen…. hid all other elements that don’t match.
4.4 So any items that don’t match, will not be displayed!
THE WHOLE THING WRAPPED UP 🌯
document.getElementById(“searchInput”).addEventListener(“keyup”, function(event) { let searchQuery = event.target.value.toLowerCase(); let allNamesDOMCollection = document.getElementsByClassName(‘name’);
for (let counter = 0; counter < allNamesDOMCollection.length; counter++) { const currentName = allNamesDOMCollection[counter].textContent.toLowerCase(); if (currentName.includes(searchQuery)) { allNamesDOMCollection[counter].style.display = “block”; } else { allNamesDOMCollection[counter].style.display = “none”; }}
});
Which annotation format did you like best, when I was explaining the code? 1, 2, 3 or 4? Let me know.
Adam