Autocomplete Element ❺
A CMS-capable dropdown UI that makes it easier to pick from longer lists.
Autocomplete, or predictive input, is a popular UX pattern that helps users navigate lists of options. In general it consists of two parts;
A text input, for the user to type partially-matching text in
A list, which appears and filters to display only items that partially-match the specified text.
Matching is typically anywhere in the string, and case-insensitive.
Demonstration
Here's an example showing SA5's autocomplete element used for navigation. In this example we have used a custom styled scrollbar, category headings and three collection lists, and the site search option.
Use Cases
The most common use cases for an autocomplete UX include;
Navigation
Quick find the item you want in a product/service list, and navigate to that page.
Form input
Quick-select an a form input which encourages ( but not requires ) specific values
e.g. Common message topics for the support department
Quick-select an a form input which requires specific values
e.g. Choose from a list of countries
Usage Notes
VIDEO TUTORIAL Here's a full walkthrough of a basic build, from a blank page, to help you understand your design options and how the attributes are applied.
Dropdown Element
I want this dropdown element to be an SA5 autocomplete element.
Place this custom attribute on the Dropdown element itself.
wfu-autocomplete
= ( no value needed )
Input Element
You'll place a form an input element within the dropdown's toggle element so that it is always visible.
Identify it with the following element-
wfu-autocomplete-input
= ( no value needed )
Within the list, you'll place the elements you want to appear. This can include a collection list, or several.
List Item Elements
Place this directly on the list items you want to be filtered.
In the case of a collection list, place it on the Collection List Item element directly ( the innermost of the 3 element collection list structure ).
FUTURE. attributes applied to the parent of the list items ( the dropdown list itself ) can be used as a fallback default.
wfu-autocomplete-item
identifies the items that you want filtered as the user types text.
Do not use this attribute on list items that should not be filtered, for example a Site Search item.
wfu-autocomplete-item-layout
defined the layout the item should use when made visible.
block
( default )flex
grid
etc.
Controlling the Matching Process
Matching can be controlled;
wfu-autocomplete-item-match-type
= ( match string, typically from CMS )
is performed as;
default
. ( default ) specific match text ( default )
Future
inner text ( any )
FUTURE - specific inner text, sub-tagged
FUTURE - Exact match. MUST match exactly ( no partial entry ), and updates the main input. Prevent validation or even clear the field if no exact match is made. Used for some strict form entry use cases
Here you'll identify the matching string
wfu-autocomplete-item-match
= ( match string, typically bound to a CMS field )
wfu-autocomplete-matching-rule
Default - anywhere in the string, all lowercase
Start of string only, case-insensitive
Regex, specific string?
Custom - use a callback function?
`wfu-autocomplete-matching-rule-config
Regex
Callback function?
Controlling the Item's Click Action
When a match item is clicked, you can control its action by adding this attribute to the item.
wfu-autocomplete-item-action
= ( action type )
Action type is one of;
navigate
( default ). Does nothing and allows the item's own link to navigatesearch
. Initiates a site search using Webflow's native search feature
Future;
custom
.
wfu-autocomplete-item-action-config
= ( varies )
On custom
, this specifies the callback function to run.
FUTURE. Default item-level settings can be inherited from the dropdown's element directly.
Tips & Best Practices
Have more than 100 CMS items to match?
If the number is reasonable, say < 200 or < 300, you can place several consecutive collection lists, setup identically. Do not enable pagination, instead use the from and to ranges, e.g. 1 to 100, 101 to 200, 201 to 300.
Site Search Item ( optional )
Within the list, you can add an item which will take the user's entered text and initiate a full site search. Take advantage of this for a more comprehensive UX experience.
Add a static item to your dropdown list, at the start or at the end
Style it differently so that it stands out
Use attr
wfu-autocomplete-item-action
=search
Do not use
wfu-autocomplete-item
To use this, you must have Webflow's site-search configured.
Styling
The Dropdown Element
If this is in your header and can overlap a nav, you want a higher z-index. Set this directly on the Dropdown Element, e.g.
z-index: 9999
.
The Dropdown Toggle
Style how you like
Change to display block rather than inline-block
Pull the label out, for optimal alignment with the dropdown carat
Optionally, move the dropdown's toggle icon inside of the form, just after the text input field
The Dropdown List
Give it a max height of e.g.
60vh
.Set it to
overflow-y: auto
, using custom properties at the bottom of the style panel.Top and bottom padding e.g.
10px
.Can contain;
Static items, like Dropdown Links or Link Blocks
Collection lists
Multiple collection lists
The Dropdown List Items
Add a hover effect for styling
Can be any arrangement of elements you want within a link block or DIV
Can be variable heights, including wrapped text
Can include icons
Technical Notes
Notes;
Designed to be self-contained, everything in an SA5 autocomplete element exists as content and child elements within the dropdown element itself.
This makes it easy to reference elements, and allows you to easily have several autocomplete elements on the same page.
Designed to leverage Webflow's native dropdown element, so that it will close when you click outside of it.
Designed to utilize CMS data when appropriate, via collection lists.
Designed to integrate with site search if you also have that available.
Designed to support complex list item styling and layouts
Future;
Possible sorting
Possible ranking, e.g.
start-of string matches get a stronger signal than middle-of-string
case-match v. non-case-match?
Direct integration with search results
Getting Started ( NOCODE )
STEP 1 - Add the Library
First, add the library as detailed in Quick Start.
STEP 2 - Apply the custom attributes to the elements you want to affect
See above for details.
Last updated