I’m currently working on a section where users can search for the right contact person based on their postal code (ZIP code). I’m using Finsweet Attributes List Filter, and I’d love to get some input on whether the following setup is possible with the standard Attributes setup — or if I’d need to add custom JavaScript.
Here’s the idea:
Each contact person is assigned to one or more postal code regions, defined by the first two digits of the ZIP code (e.g., 04, 22, etc.).
Users should enter their full ZIP code into an input field (e.g., 04277).
However, I only want to use the first two digits of the input to filter the list.
My questions:
Is there a way to dynamically extract only the first two digits from the user input before filtering with Attributes?
Or would I need to write some custom JavaScript to trim the input value before it’s passed to the filter?
And if custom JS is needed, can it be combined safely with Attributes without breaking functionality?
Would love to hear your thoughts or see if anyone has done something similar!
The Problem:
While this approach works for the filtering logic, it has an unintended side effect - the input field itself gets limited to only 2 characters. Users should be able to enter a complete ZIP code (e.g., “10115”) in the input field, but the actual filtering should only use the first two digits (“10”).
The Question:
What’s the best way to separate the display value in the input field from the filter value used for searching? I want users to see and type the full ZIP code, but have the filtering mechanism only consider the first two digits.
Is there a way to modify the filter value without affecting what’s displayed in the input field, or should I approach this differently with the Attributes API?
@Support-Luis, thanks a lot for your quick reply and the Loom video — super helpful!
I think the Mirror Input solution is a clever approach, and it could work well in many cases. However, I’m currently planning to integrate the Google Maps API into the input field, mainly to allow full ZIP code autocompletion. Given that setup, I feel like having a dedicated single input field (rather than using a mirrored input) might be more robust and easier to manage.
Because of that, I’d probably go the custom code route — extract the first two digits from the input and use them to filter the list. My question now is: would you still recommend using the List Filter Attribute in this setup, or would it be better to go fully custom if I’m already working with external APIs and custom logic?
Just want to make sure I’m not trying to force the Attributes setup into something it’s not intended for.
Would love to hear your take!
I ended up writing a custom hook to filter the list based on the ZIP code prefix. Here’s what I have so far:
listInstance.addHook("filter", (items) => {
// Check if the filters are set and if the zip condition exists
const zipCondition =
listInstance.filters.value.groups[0].conditions.find(
(cond) => cond.fieldKey === "zip"
);
if (
zipCondition &&
typeof zipCondition.value === "string" &&
zipCondition.value.length >= 2
) {
// Only use the first two digits for filtering
zipCondition.value = zipCondition.value.substring(0, 2);
}
// collect the items that match the filter
const filteredItems = items.filter((item) => {
// Flatten all comma-separated values into one array
const zipList = item.fields.zip.value.flatMap((zip) =>
zip.split(",").map((z) => z.trim())
);
return zipList.includes(zipCondition.value);
});
return filteredItems;
});
Here’s the issue I’m running into:
When a user enters a full ZIP like 04277, that value gets overwritten by the shortened 04 (since I mutate zipCondition.value) and that’s what shows in the input field.
Ideally, I want to keep the original input (04277) visible while using only the prefix (04) for filtering.
I tried storing the shortened value in a separate variable instead of overwriting zipCondition.value, but that causes the default filter logic to re-apply later using the full ZIP — and then no results show.
My question:
Is there a way to disable the default filtering behavior completely, so only the logic in my addHook("filter") gets applied?
Or is there a better approach to modify how values are used for filtering without affecting what’s shown in the input field?
This is all still independent of any external APIs (like Google Places) — just trying to make the ZIP logic work for now.
Hey @juicydisorder! Have you tried a similar approach to the one shown in this section of the documentation?
To stop the filter from filtering when a user interacts with the input, simply remove the fs-list-field attribute and manage the filtering within the API.
You can DM me a link to the site, and I can take a look!
