How to add search and category filters to a Wix page with Velo

A directory, a product list or a portfolio gets hard to use past a few dozen items. Wix’s built-in dataset filters are fixed in the editor, so visitors can’t search. With a few lines of Velo you can add a search box and a category dropdown that filter the list as the visitor types.

This guide assumes you have a CMS collection with a title field and a category field, and a repeater connected to it through a dataset.

1. Set up the page

Add these elements and set their IDs in the Properties panel:

• A dataset connected to your collection: #dataset1
• A repeater connected to the dataset, showing the title and category
• A text input for the search: #searchInput
• A dropdown for categories: #categoryDropdown, with an option labelled “All” whose value is all, then one option per category
• A text element for the empty state: #noResults, hidden on load

2. Write the filter

Open the page code and add this:

import wixData from "wix-data";

let debounceTimer;

$w.onReady(() => {
  $w("#searchInput").onInput(() => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(applyFilter, 300);
  });
  $w("#categoryDropdown").onChange(applyFilter);
});

async function applyFilter() {
  const text = $w("#searchInput").value.trim();
  const category = $w("#categoryDropdown").value;

  let filter = wixData.filter();
  if (text) {
    filter = filter.contains("title", text);
  }
  if (category && category !== "all") {
    filter = filter.eq("category", category);
  }

  await $w("#dataset1").setFilter(filter);

  if ($w("#dataset1").getTotalCount() === 0) {
    $w("#noResults").show();
  } else {
    $w("#noResults").hide();
  }
}

Three details make this feel right:

• The debounce. Without the 300 ms wait, every keystroke sends a query. With it, the filter runs once the visitor pauses.
• Building the filter step by step. Each condition is only added when it has a value, so an empty search box or “All” in the dropdown doesn’t narrow the results.
• The empty state. getTotalCount() after setFilter tells you whether anything matched, so the visitor sees a message instead of a blank space.

3. Search more than one field

To match the search text in the title or the description, combine two conditions with or:

if (text) {
  filter = filter.and(
    wixData.filter().contains("title", text).or(wixData.filter().contains("description", text))
  );
}

When to go further

This covers most directories and catalogues. Larger sites often add filters by price range or tags, sorting, a “clear filters” button, or filters saved in the URL so visitors can share a filtered view.

If you’d like this built on your site, I do Wix Velo development for custom search, filters and dynamic pages.