Thursday, December 8

Tag: search filter using vanilla javascript

Web Tricks

Quick and Simple Search Filter Using Vanilla JavaScript

When building Single Page Applications a feature I frequently find myself adding is a simple search filter. Nothing too in depth, I'll just want a text field to be able to quickly filter over items to find specific ones.I'm going to share what I do, because it's quick to implement, performant enough, and often very helpful.To start with, this technique assumes that the data you're filtering over is in the form of an array of objects. From there it's all standard libarary array and string methods. Our Tools Array.prototype.filter Array.prototype.filter is how we filter our array.As a parameter, it takes a callback that it runs on each item of the array. This callback should return true or false for whether or not it should be a member of the filtered array. let oneToTen = [1, 2, 3, 4,...