I’m making a site for realtor clients who have a long, long list of neighbourhoods they want to give users to filter homes by. The intended functionality:
There is a pre-filled field with a random/default neighbourhood (i.e. “Thornhill”)
User would click on text, opening a scrollable dropdown, and be able to type their own neighbourhood, thereby filtering the dropdown with neighbourhoods listed, or they would go directly to the dropdown and scroll to the neighbourhood they’re interested in. The neighbourhoods would all be sourced from a collection list.
They would select their neighbourhood, which would ideally (but not necessarily) change the image next to the form select, and then hit submit to go to its corresponding page.
The feature in question is at the bottom, the “Neighbourhood” panel. The idea would be a user would see a preview image of a neighbourhood and it’s name, click on the name to select or find another neighbourhood, and then hit ‘take me there’ for more on the selection and a filtered listed of the homes available there.
I can’t for the life of me figure out how to do this or find a similar example online. If anyone has any idea, help would be appreciated.
There are approximately 30 neighbourhoods. It’s a long list users will definitely have to scroll through. So I was hoping I could set up a form-style select that allowed the user to type into the field to filter and find the neighbourhood they’re after. And when it is selected, the picture to the left would change to a corresponding photo of the neighbourhood.
I may be able to make a dropdown whose options are CMS sourced, but I don’t know how I’d change the photo to corresponding selection. And once selected, how to set up a button to actually send the user to that page.
30 is very reasonable, but you’re right that you’d want to support text entry.
Instead of “selecting” though, I might go with “filtering”, depending on how much space you want to allocate in your layout. If I start typing Hill... maybe I want to see Hillcrest, but maybe I also want to see Forest Hill and West Hill.
30 is great because it’s well under Webflow’s 100-item collection list limit.
To do the above, you’d want to use Finsweet’s CMS Filter tool with a text entry filter input.
If you also use CMS Load, you can paginate the items list on-page, so that all 30 are available but only e.g. 4 at a time.
Or you could do something even fancier with a slider, which is perhaps more engaging for mobile users. Finsweet has a CMS Slider too for integrating Webflow’s slider with the CMS, but I actually prefer Swiperjs for its UX.
If you get completely stuck and want some help, I build things like this all the time. Drop me a message here by clicking my name and I’ll send you my rates.
