Implementing a basic filter function in JavaScript
It’s a bit trickier than you think, bubba.
So I just started learning JavaScript at my coding boot camp and while I’m excited to tackle the Supreme Leader of languages, having to learn everything from a beginner’s perspective again is proving to be a bigger hurdle to yeet myself over than my brain-legs thought it’d be. One of the first thing I learned was how to filter an array of data and make the website update accordingly. We’re not just talking about returning a match. We’re talking about literally seeing the list of data whittle down to what it is you typed into the text box.
With this instance of code, I just decided to throw everything under the “DOMContentLoaded” event listener.
document.addEventListener('DOMContentLoaded', () => { // everything put in here to let it be able to update DOM after DOM is initializedconst searchContainer = document.querySelector('#search-form')
The HTML below is going to create a basic search box. We want to querySelect the input form’s ID and save it to a variable to later refer to it in our code. It’s important to get the id of the FORM and not the INPUT box.
<form id="search-form" class="" action="" method=""> // get this ID<input id="search-input" type="text" name=""> // NOT this ID</form>
So let’s say you have an array of data you’ve laid out in some sort of container and have displayed it on your website. Now I could get into how to do that, but it’d honestly be best if you search for that elsewhere as many factors can lead into this. Assuming you have this array of data saved to a variable, and I sure hope you do, we’re going to create an event listener around that variable.
searchContainer.addEventListener('input', (words) => {}The event we’re listening to is going to be “input”. This is what registers your keystrokes. (words) is just the argument of what those inputs are going to be. Also, yes, the argument has to be in (parentheses). Now it’s time to filter!
We’re going to create another variable here. Let’s just call it filteredText. We’re now going to call .filter on your array of data as well as include the parameters of the filter. Also be sure to include what attribute of your object it is you’re filtering by.
searchContainer.addEventListener('input', (event) => {const filteredText = arrayOfData.filter(params => params.attribute.toLowerCase().includes(event.target.value.toLowerCase())) // You don't have to name it params. Let your creative juices flow.
Before I go any further, you’ll notice that I put in toLowerCase() twice there. Why, you may ask? Well I’ll bloody tell you why. This is to make sure that the comparison comes through as case-insensitive. By forcing the attribute of whatever you’re filtering to be lower case in our backend and comparing it to the value of the input to also be lower case, we can make sure that the matches will come through just fine. Code is case sensitive, so in this case, we need to watch our backs.
Great! We have our filtered data saved to this filteredText variable. Now what? Now we just get the HTML to edit according to what’s being filtered. Now I have no idea how you set up your HTML, but you should have done so via some method that would render each element of your array of data and then put it into a container. What I did was write out a sort of HTML-generator to do this.
function renderElement(element) { return (`<div class="show-element">// This area would be whatever HTML you want</div>`)}
Then I made another function that takes in all of the data and uses my HTML-generator and shows it all on the website.
function renderAllElements(arrayOfData) { // function to take in array of data and map through to renderElement, which generates HTML of each element in array.return arrayOfData.map(renderElement).join('')}
And there you have it! Basically how to filter and instantly return the items. An important feature of any respectable website. Results may vary.
