Powerful and Dynamic Blog Filters with Wix Velo – Built by YourWeb 🚀
- yourweb
- Jun 28
- 4 min read
Updated: Jul 1
At YourWeb, we love building flexible and intelligent solutions for our clients. That’s why we developed a dynamic filtering system using Wix Velo for one of our latest blog projects, allowing users to search and filter posts in a much more efficient and enjoyable way.
🎯 What does this blog filtering system offer?
We implemented filters that work together dynamically to narrow down results based on several fields:
Title (with autocomplete)
Author (with autocomplete)
Main Category
Subcategory
Tags
Location
Test Demo Live Version here
🔍 Autocomplete for title and author
When typing into the search bar, users see real-time suggestions matching either the title or the author, making discovery fast and intuitive. This feature greatly improves the user experience by reducing typing effort and offering immediate feedback.
Each filter dynamically updates based on the selections in the others, making it easy to narrow down content quickly. For example, choosing a category will automatically limit the subcategories, tags, and locations to only the relevant ones.
🧠 How we built it: The technical side with Wix Velo
To achieve this, we used Wix Velo’s backend and frontend capabilities:
Backend Functions
We created powerful backend functions using webMethod from wix-web-module to:
Fetch dropdown options dynamically (getDropdownOptions)
Provide live search suggestions (updateRepaterSearch)
Here’s a glimpse of how we optimised the dropdown filters:
function createDropdownWithCount(itemsArray) {
const counts = {};
itemsArray.forEach(item => {
if (item) {
counts[item] = (counts[item] || 0) + 1;
}
});
const uniqueSorted = Object.keys(counts).sort();
const dropdown = uniqueSorted.map(value => ({
label: `${value} (${counts[value]})`,
value
}));
dropdown.unshift({ label: "All", value: "All" });
return dropdown;
}
function createDropdownWithCount(itemsArray) {
const counts = {};
itemsArray.forEach(item => {
if (item) {
counts[item] = (counts[item] || 0) + 1;
}
});
const uniqueSorted = Object.keys(counts).sort();
const dropdown = uniqueSorted.map(value => ({
label: `${value} (${counts[value]})`,
value
}));
dropdown.unshift({ label: "All", value: "All" });
return dropdown;
}
We used hasSome, eq, contains, and or filters to compose the perfect query, adjusting to every user input in real time.
Frontend Logic
On the frontend, we used Wix’s $w API to listen to changes in the filters and update dropdown options accordingly. We also managed the autocomplete repeater for the search functionality and called the backend filtering logic. Here’s an example:
$w('#search').onInput(() => {
if ($w('#search').value !== '') {
updateRepaterSearch($w('#search').value).then((options) => {
if (options.length > 0) {
itemsSearch = options;
$w('#repSeach').data = options;
$w('#repSeach').forEachItem(($item, itemData) => {
});
$w('#repSeach').expand();
} else $w('#repSeach').collapse();
})
} else $w('#repSeach').collapse();
updateDropdowns();
});
$w('#search').onInput(() => {
if ($w('#search').value !== '') {
updateRepaterSearch($w('#search').value).then((options) => {
if (options.length > 0) {
itemsSearch = options;
$w('#repSeach').data = options;
$w('#repSeach').forEachItem(($item, itemData) => {
});
$w('#repSeach').expand();
} else $w('#repSeach').collapse();
})
} else $w('#repSeach').collapse();
updateDropdowns();
});
When a user clicks on an autocomplete suggestion, we fill in the search bar and re-run the filters automatically.
💡 Final thoughts
This solution offers a fast, smart, and scalable way to filter blog content with great UX. With the power of Wix Velo, we’ve created a highly adaptable system ready to handle growing blog content and changing user needs.
Are you looking to implement something similar for your website or client? Reach out to us at YourWeb — let’s build something amazing together. 💻🌟
