I was working on a project for a friend and she wanted a search filter on her site. The search filter is supposed to search through a list of work that she has on various pages. Most active search filters require a database connection or XHR requests. That was a bit too heavy for me. Other search filters were difficult to adapt to what my friend wanted. All I wanted was a functionality that searched through the current page, something simple, light and adjustable. It was really hard to find something like that. So I set about making one myself.
The search filter I created is a simple JavaScript function that searches through a list of items and hides the items that don't match the search query. It's a simple function that can be used on any page. It's also very easy to adapt to your own needs. I've used it on a few projects now and it's been working great.
I'm working on a few improvements but I wanted to share it with you. I hope you find it useful.
List of requirements.
- Lightweight
- Flexible and easy to adapt to different projects
- Easy to implement
- No database connection
- No XHR requests
- No jQuery
- No plugins
- No dependencies
- No CSS frameworks
- Show search results after two characters have been typed
List of To-Dos
Show a message when there are no results- A reset button
Files on Github
The Demo.
See the Pen A Simple Search Filter with Vanilla Javascript by Magalie Chetrit (@magaliechetrit) on CodePen.
The HTML Markup.
A simple search input with a class of js-search-field and a list item with a class of js-search-item. I am using the prefix js- prefix to indicate that this is a class that will be used in JavaScript. It's a convention that I like to use to keep things organized.
<input type="search" class="js-search-field" placeholder="Type a word.."/>
With just this simple search input it's easy to add it to any place. I've even implemented in a WordPress project. The only thing you need to do is add the class js-search-field to the search input.
The items to be searched (search dataset).
In this case, the dataset is the list of items that we want to search through. In my demo, I am using a list of random items. Each li item has a class of js-search-item which is set in an array called searchItems.
The meat of the operation is in the function renderResults. This function is called when the user types in the search field. The function loops through the array searchItems and checks if the search query matches any of the items in the array. If it does, it shows the item. If it doesn't, right now it does nothing. But it would be nice if it showed a message that there are no results. it shows a message.
Key takeaways.
Lately, I've been on a big kick to learn more about JavaScript. I've been using it for a while but I've never taken the time to learn it properly. I was a little scared of it, I think. I mainly defaulted to jQuery. I still appreciate jQuery. It's one of the best libraries on the web.
Using vanilla JavaScript taught me to appreciate the sequence of rendering of a website.
I also understand other languages such as PHP much better. I know PHP is a server-side language, but because I was exposed to new principles I understand the MVC patterns and why some things are done the way they are.
Debugging is also much easier in vanilla JavaScript. I've learned to use the console and the debugger. It's a great way to stop the code at a certain point and see what's going on.
Let me know if you have any questions or suggestions. I'm always open to learning new things. And I would love to know if you've used this in any of your projects, shoot me an email!