So, head over to your terminal and create a folder AddressBook. Inside it create two file index.html and main.js. I have also opened the code in Visual Studio code. You can also do the whole process manually.
Next, we will add the basic html skeleton. Here we are also using materialize css. I have also started the project with VS Code , Live Server extension and the project is live at http://127.0.0.1:5500/index.html
After this added an input box and then an unordered list. We are using materialize classes, so that the basic style is there.
Inside the ul, we have lis for each alphabet. We again have used materialize classes for styles. You can take all the html from the github link at the end of the project.
After that we are adding a keyup event to it, so every-time we type something in the input box this event will be fired.
Now, inside the function we are first getting the value of the entered input in filterValue and also converting it into upper-case. We are also selecting all the lis by first selecting the ul and then all the li inside it.
Now, we will loop through the li using forEach. After that we are getting the anchor tags, which contains all the name. We still don’t have any filtering logic and if we type anything, we will get all the anchor tags.
We are using the ternary operator to make the item.style.display = ‘block’ in the case of a match and it as ‘none’ in case of no match.
This completes our small project, but there is an enhancement which can be done. It is to remove the capital alphabets for which no match is found. Hope the reader do it.
You can find the code in this github repository.