Autocomplete / Predictive Input

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.