Food Ordering App: Filters and Search Implementation

Food Ordering App: Filters and Search Implementation

Search and filters are key features of the food ordering app. Here is how to implement them.

Search

let searchQuery = "";

document.getElementById("search").addEventListener("input", (e) => {
  searchQuery = e.target.value;
  renderMenu();
});
``
Filter items by name (case-insensitive):

```js
if (searchQuery && !item.name.toLowerCase().includes(searchQuery.toLowerCase())) return false;
``
### Filters

```js
let filters = {
  veg: null,        // true (veg only), false (non-veg only), null (all)
  category: "all",  // "all", "italian", "fastfood", "healthy"
  maxPrice: Infinity,
};
``
#### Veg/Non-Veg Toggle

```js
function toggleVeg() {
  filters.veg = filters.veg === null ? true : filters.veg === true ? false : null;
  renderMenu();
}
``
#### Category Dropdown

```js
document.getElementById("category").addEventListener("change", (e) => {
  filters.category = e.target.value;
  renderMenu();
});
``
#### Price Range

```js
document.getElementById("maxPrice").addEventListener("input", (e) => {
  filters.maxPrice = parseInt(e.target.value) || Infinity;
  renderMenu();
});
``
### Combined Filter Function

```js
function getFilteredItems() {
  return menu.filter((item) => {
    if (searchQuery && !item.name.toLowerCase().includes(searchQuery.toLowerCase())) return false;
    if (filters.veg !== null && item.veg !== filters.veg) return false;
    if (filters.category !== "all" && item.category !== filters.category) return false;
    if (item.price > filters.maxPrice) return false;
    return true;
  });
}
``
### Debounce the Search

```js
const debouncedSearch = debounce((query) => {
  searchQuery = query;
  renderMenu();
}, 300);

document.getElementById("search").addEventListener("input", (e) => {
  debouncedSearch(e.target.value);
});
``
### No Results State

```js
function renderMenu() {
  const items = getFilteredItems();
  if (items.length === 0) {
    list.innerHTML = "<p>No items found</p>";
    return;
  }
  // render items
}
``
### The Takeaway

Implement search (case-insensitive name filter), filters (veg/non-veg toggle, category dropdown, price range), combined filter function, debounced search (300ms), and no results state. Re-render the menu on every filter change. Show 'No items found' when empty.