Search Results + F'in Filter

Hey F’in!

I was wondering if it’s possible to create this kind of funcionality using F’in Filter Attributes:

On the home I have a search field and when the user enters eg. restaurant location and hit search it would go to the search result page or other related page and would get the results filtered already?

I don’t know if it makes sense. Anyway, I’m looking for multi-location search solution combining F’in Filtering.

Thanks for any advice!

Hey @slawek! Yes! You can look into adding the user selection from the homepage to the query params and CMS Filter will filter the list according to these parameters on page load.

I’ve done this before, please share your links if you need any help!

Looking at doing this myself too. Is there a Finsweet solution for redirecting to the necessary page upon submit, or is it a case of using custom code?

Great @Support-Luis would love to see how you would set up this thing. Here is my testing page Webflow - Copy of CTDA.

What I would love to do is to redirect user from home hero section and search field to Find a dealer page with already filtered items. There are only 3 created for testing purposes + JQuery to display the map.

If you also have any suggestion about this kind of feature + multi-locaton map etc. would love to hear that too.

I’ve tried, Storepoint + Mapbox, google embed as you see, now I’m closer to Jetboost solution for map and filtering for CMS Items. It’s in beta but you can ask for the early access and it’s might be a game changer for many people struggling with multi-location map in Webflow. Anyway, thank you so much for any help!

You can use Form Submit - No-code using Attributes to configure Webflow’s native form submit to redirect a user to a new page.

I’ve also answered below with how I’ve done it before :wink:

Hey @slawek! Would this be the zip code value from the home page? If so you can use this snippet to add the zip provided by the user as a query param that populates the find a dealer search field

<script>
  const zipForm = document.querySelector('#email-form');

  zipForm.addEventListener('submit', function handleSubmit(e) {
    e.preventDefault();

    const zipValue = document.querySelector('#name').value;
    const url = '/find-a-dealer/?*=' + zipValue;
    
    window.location.href = url;
  });
</script>

If the form is still being submitted you can disable the form with Form Submit - No-code using Attributes

  1. Thank you so much! Works great @Support-Luis and I had to disable form as well. What if there is no results after the search. I mean I have set up the no result element with this class .dealer-search_empty-state but when the user is redirected from the home page even if he is searching for zip code which is not in database the empty state does not show up. Although it shows up when the regular filtering is applied.

  2. Is it possible to add to the main search field (home page) live search result information? You know like you are searching for zip code 90550 and start typing 90…and also other related results show up (all pulling from CMS database)?

Thank you!

Hey @slawek!

  1. Can you share your published site? Where I am testing the functionality is not working as expected

  2. Have you seen this solution? → Combo Box for Webflow
    We can have all valid zip codes added to the select and the zipcodes will filter out as the users type.

Hey Luis, I’v set this up using the native “Action” option in the form settings to redirect to the URL and using param query to grab the param from the URL and populate the search field in the target page. However, I think I’v gone about this all wrong as the populated search field is not filtering the collection list. I thinks it because the param query is “?search=” representing the form field it came from, instead of “?*=” which works fine. However, I tired to set up Form Submit attribute but I couldn’t get the success message to stop showing, and I couldn’t get the forms to stop submitting to Webflow Forms. Here is a read only link if your able to help further: Webflow - AI Tool Library

hey @gregdolan! In your case, you’ll need to simulate a user input on the search field for it to filter the list with document.querySelector('#field-3').dispatchEvent(new Event('input',{bubbles:'true'})).

However, changing the text field name to * seems to yield the same results and also provides a cleaner query.
Screen Shot 2023-09-06 at 09.54.05

Thanks for looking into it Luis, when changing the text field name to * the param query actually seems to end up as ?field= instead of ?*= which is weird. I then tried the suggested code but still no luck :pensive:

https://preview.webflow.com/preview/aitoollibrary?utm_medium=preview_link&utm_source=designer&utm_content=aitoollibrary&preview=949c46d93a504f0e5944b6e986512441&workflow=preview

@gregdolan interesting, and why not prevent the form submission completely? You can use this Attribute Form Submit - No-code using Attributes and let the code handle the redirect and the query

Hey Luis, for the life of me I could not get Form Submit attribute to work. You might advise where I’m going wrong.

So I added the script to the head, then I added fs-formsubmit-element=form to the form block. Then, do I need both fs-formsubmit-redirect and fs-formsubmit-redirecturl or can I just use the latter? It says add these to the form element, can you clarify what the form element is?

So there’s the form block and then the form elements within it, such as input fields and submit button. Can it be any form element? I tried it with them all however.

And when adding fs-formsubmit=redirecturl, is the value redirect_url and then it takes for redirect url from the form settings, or do I leave the form settings redirect url bank and set the attribute value to www.actualurl.com.

I tired all variations, but I could not get the success messages to stop showing, the form not to submit to the Webflow side and the page didn’t redirect.

Apologies if I’m missing something obvious.

Hey @gregdolan! You’ll only need to add the fs-formsubmit-element=form and fs-formsubmit-disable = true to your form.

Users will be redirected to the new page with the window.location.href = url; line on the code I’ve shared above. There is no need to set this up with the Attribute options.

@gregdolan @Support-Luis Any chance you ever figured out a solution to change field to * here? I’m having the same challenge with my solution and can’t seem to get anything to return a URL with the *=[input] format.

Hey @brandonkeelean! Can you share your links?

Hey @brandonkeelean, sorry for late response, I don’t think I have notifications set up for these chats.

So I struggled with above solutions, but I did find an alternative solution that worked for me.

To start off I set up query param without any issues. But this left me with the issue you have with the ‘*’ not being in the query string.

So, in the form I want to search from, I set the ‘action’ up to redirect the form on submit simply by adding the slug in the ‘action’ box.

Then, on the target page, where you need that query string, I used this code in the before body tag

<script>
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
if (params.has('search')) {
    const searchValue = params.get('search');
    params.delete('search');
    params.append('*', searchValue);
    window.history.replaceState({}, '', `${location.pathname}?${params}`);
}
</script>

In my case my query string was ?search=value, so you might need to adjust the code slightly changing ‘search’ where you see it.

Hope this helps, let me know if it works.

1 Like

@Support-Luis One last question from me on this, I see a lot of sites lately using AI assisted search to filter their cms collections. The AI can understand the context of the search query and return the appropriate CMS items, even if the exact keywords are not in the search. Is this something that can be done with cms filter or is it something that might be possible in a future update?

@gregdolan at the moment this is not possible. We are working on some updates to better the performance of CMS Filter :slight_smile:

1 Like