Filtering List by ZIP Code Prefix using Attributes

[juicydisorder]

Hey everyone

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:

1. Is there a way to dynamically extract only the first two digits from the user input before filtering with Attributes?
2. Or would I need to write some custom JavaScript to trim the input value before it’s passed to the filter?
3. 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!

Thanks in advance

[Support-Luis]

Hey @juicydisorder! For Attributes V2, we have included a new Fuzzy Search setting, which could be useful in this setting.

However, if you want to go the custom code route, the safest way to add code is with the Attributes API, which is detailed here:

packages/list/README.md

If you need any help with the code, don’t hesitate to reach out!

[juicydisorder]

Hi @Support-Luis,

I’ve been experimenting with the Attributes API to solve this ZIP code prefix filtering challenge. Here’s what I’ve tried so far:

I’m using the API to create a hook that runs during filtering and modifies the List Instance filter to only use the first two digits for filtering:

window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
  'list',
  (listInstances) => {
    listInstances.forEach((listInstance) => {
      listInstance.addHook('filter', (items) => {
        const filters = listInstance.filters.value;
        
        filters.groups.forEach(group => {
          group.conditions.forEach(condition => {
            if (condition.fieldKey === 'zip' && condition.value && condition.value.length >= 2) {
              const originalValue = condition.value;
              const zipPrefix = originalValue.substring(0, 2);
              condition.value = zipPrefix; // Modify filter to use only first 2 digits
            }
          });
        });
        
        return items;
      });
    });
  },
]);

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?

Any guidance would be greatly appreciated!

[Support-Luis]

Hey @juicydisorder! We could incorporate Mirror Input Values into the setup

I’ve recorded a quick Loom on what it would look like, as well as pointing out some potential issues.

Let me know what you think!

[juicydisorder]

@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!

[Support-Luis]

You can absolutely integrate Attribute with data from any API!

This is the documentation for the API, but you can always let me know if you get stuck, and I can jump in and help!

packages/list/README.md