Project 2: Search Filter App

Build a Live Search Filter

Use your knowledge of higher-order functions and closures to build a real-time search filter. As the user types, the list narrows down dynamically — no page reload needed.

YOUR TASK

Create a search filter that:

Starts with a hardcoded array of at least 8 items (e.g. country names, fruit, animals)
Has a filterList(query) function that uses .filter() and .includes() to return matches
The search is case-insensitive — use .toLowerCase()
When the query is empty, all items are shown
Prints matching results to the console each time filter is called
Shows a "No results found" message when nothing matches

Use closures to keep a createFilter(list) factory function that returns the filter function.

Need a hint?

Structure to follow:
1. Define const items = ["Apple", "Banana", ...];
2. Write function createFilter(list) that returns a function
3. The returned function takes query and uses:
list.filter(item => item.toLowerCase().includes(query.toLowerCase()))
4. const filterList = createFilter(items);
5. Test: filterList("an") should return Banana, Mango, etc.
6. Handle empty query: if (!query) return list;

Example output:

filterList("") → ["Apple","Banana","Cherry","Mango","Grape","Lemon","Lime","Orange"]
filterList("an") → ["Banana","Mango","Orange"]
filterList("xyz") → No results found
filterList("APPLE") → ["Apple"]

Language:

Input:

Code Editor Ready

Output

Console

Console initialized...
Ready for Project 2: Search Filter App

> Build your filter function using closures
> Hit "Check My Code" when you're ready!