Dropdown lists are great, when you have a manageable number of items that are sorted, and which have logical names that the user can easily find what they're looking for.
When that doesn't fit your UX, a text field with autocomplete is a much better solution;
- It can handle much larger lists
- Sorting is not relevant
- As the user types, any part of the text string can match, it does not need to begin with the typed characters
Solution
SA5 Autocomplete Element
There are a number of approaches to this, but Sygnal's SA5 library has a full attributes-based autocomplete solution.
https://attr.sygnal.com/sa5-elements/autocomplete-element
Made in Webflow
Also, here are several good approaches from Made in Webflow.
- https://webflow.com/made-in-webflow/website/CMS-Autocomplete
- https://webflow.com/made-in-webflow/website/autocompletejs
- https://webflow.com/made-in-webflow/website/cms-predictive-search-v1
- https://webflow.com/made-in-webflow/autocomplete
Ideally you want a solution that can be backed with CMS content, even when the length is long- up to 2,000 items.
Finsweet CMS Filter + CMS Load
This solution works quite well even for larger collections. It works well with partial text matches.
I have not tested this in relation to an autocomplete form field however, which has the added mechanics of picking one, and exposing that selected item as data within the form.
