SA5 | Sygnal Attributes | Designed for Webflow
Buy Us a Beer!Community ForumMicro-Consulting
  • ➡️Github Repo
  • 👫Sygnal Attributes Community
  • 📘Overview
    • Sygnal Attributes v5
    • How to Add Custom Code
    • What is Sygnal Attributes?
    • Sponsor a Feature ✨
    • What's New?
    • Library Modules
    • Technical Notes & Goals
      • CSS Media Queries
      • Callback Handlers
      • Custom Attributes
    • Documentation
    • Configuration Blocks
      • Configuration Block Specification
    • Preloaders
    • Breakpoints
    • Component Support 🧪
    • Sygnal Attributes ( SA5 ) Support
    • Dev Team Notes
    • GDPR
    • SA6
    • Triggers, Events & Actions
      • Triggers
        • Click Triggers
        • Scroll Into View Trigger
        • Hover Trigger
        • Timer Trigger
        • Form Triggers 🧪
          • Form Submit Trigger 🧪
        • Exit Intent Trigger 🧪
        • ECommerce Triggers 🧪
        • Inactivity Trigger 🧪
        • Page Load Trigger 🧪
        • Url Hash Trigger 🧪
        • Gated Trigger 🧪
        • Link Triggers 🧪
        • Reactiv Triggers 🧪
        • Interaction Trigger 🧪
      • Events
        • Namespacing
        • Event Data
        • Link-Based Triggers 🧪
        • Breakpoints 🧪
        • Persistent Events 🧪
        • Gated Events 🧪
      • Actions
        • Click Actions
        • Alert Action
        • Visibility Actions
        • Scroll Into View Action
        • Video Actions 🧪
        • Audio Action 🧪
        • Class Adder Actions 🧪
        • Tab Element Actions 🧪
        • Interaction Actions 🧪
        • Form Actions 🧪
        • Navigate Actions 🧪
        • Script Actions 🧪
    • SA5 Core
      • Handlers
      • Controllers
      • Core Processing
      • Core Technical Notes
        • Element Tracking
  • 📘sa5-cache
    • 🔍About SA5's Cache Lib
    • Data Caching ❺
      • Cache Setup v4
  • 📘sa5-socialshare
    • 🔍About SA5's Social Share Lib
    • 🚀Quick Start | SA5 Social Share
    • Email Social Share ❺
  • 📘sa5-detect 🧪
    • 🔍About SA5's Detect Lib
    • 🚀Quick Start | SA5 Detect
    • Page
    • User Agent Detection
    • Geolocation Detection 🧪
      • Cache Setup v4
    • Detect Incognito Mode
  • 📘sa5-analytics
    • 🔍About SA5's Analytics Lib
    • 🚀Quick Start | SA5 Analytics
    • A/B and Multivariate Testing
    • UTM Tracking
    • Rel Attributes
    • GA Events
    • GTM Events ❺🧪
      • Important dataLayer Notes
      • Facebook
      • Google Analytics ( GA4 )
      • Future
  • 📘sa5-data
    • 🔍About SA5's Data Lib
    • 🚀Quick Start | SA5 Data & Data-Binding
    • Usage Notes
    • Concepts & Terminology
      • Data Paths
      • Complex Data Sources
      • Developing Concepts 📝
    • Data Sources ( Simple )
      • URL Querystring Data Source
      • URL Part Data Source
      • User Info Data Source
      • Cookies & Web Storage Data Sources 📝
      • Global Data Source 🧪
    • Data Sources ( Complex )
      • RichText Data Source 🧪
      • Defining Custom Data Sources
      • Collection List Data Source 📝
        • Developing Concepts | Collection List Data Sources
    • Data Binding
      • Conditional Visibility
      • Form Elements 📝
      • Templates & Macro Expansion 📝
      • Developing Concepts on Data-Binding 📝
      • Macro Expansion
        • Macro Expansion
        • Count Items
      • Preloaders
    • SA5 Data ( HSON ) ❺🧪
      • SA5 Data BETA Kit
      • JSON Data Variants
    • Advanced Use
    • SA5 Data JS API
    • Future 📝
      • External Data
      • One-Way v. 2-way Bindings
      • Reactive Bindings
      • Data Sources ( External ) 🧪
        • Google Sheets Data Source ⛔
        • GitHub Data Data Source ⛔
  • 📘sa5-forms
    • 🔍About SA5's Forms Lib
      • SA5 Forms Roadmap
    • 🚀Quick Start | SA5 Forms
      • SA5 Forms Future
    • Data-binding Form INPUTs & SELECTs ❺
    • Smart Form Webhook Handler ❺
      • Form Webhook Handler JS API Events
      • n8n Handler
      • ▶️Basin Handler
        • File Uploads
        • Future
      • ▶️Make ( Integromat ) Handler
      • Future
    • Form Data Validation
      • Invalid Field Indicators (Real-Time) 🧪
      • Invalid Field Indicators on Submit Attempt 🧪
      • Email validation
    • Remove Unchecked Checkboxes ✨
    • Preserve Line Breaks
    • Form IP Info ❺
    • File Uploads 📝
    • Custom Form Submit Button
    • File Downloads
    • Form Select Element
    • SA5 Forms API
    • Dynamic Forms
    • Form Success Redirect 🧪
    • Show / Hide Password 🧪
  • 📘sa5-html
    • 🔍About SA5's HTML Lib
      • Webflow Interactions
    • 🚀Quick Start | SA5 HTML
    • Advanced Element Sorting ❺
    • Advanced Element Filtering ❺
      • Useful Filtering Examples
    • Dynamic URLs 🧪
      • Future
    • Dynamic Attributes
      • Future
        • Smart Attributes 🧪
        • Prefix, Postfix, and Formatted Attributes 🧪
    • Scroll to Section
    • Breakpoints ❺
    • Limit Items by Breakpoint ❺
      • Designer CSS Embed
    • Limit Items to Multiple-of ❺
    • Numeric Sequencing ❺
    • Truncate Text w/ Ellipsis ❺
    • Encoded Email
    • Hide Section w/ Empty Collection Lists ❺
    • Download File ❺
    • Decode HTML ❺
    • Markdown ❺
      • Themes
    • Transform ❺🧪
    • Code Formatting ❺🧪
    • CMS Code Injection ❺🧪
    • Responsive Tables ❺🧪
    • Text Formatting ❺🧪
    • Components ❺🧪
      • Component Object Positioning
    • Auto-Size IFRAMEs 🧪
    • Switch Case ❺🧪
    • Lazy Load
    • Gallery 🧪
    • Scroll Anchor
  • 📘sa5-layout
    • 🔍About SA5's Layout Lib
      • Future
    • 🚀Quick Start | SA5 Layout Lib
    • Layout ❺
      • Tabs Layout Handler
      • Slider Layout Handler 🧪
      • Future
    • Element Groups ❺🧪
    • Equal Height Rows ❺🧪
  • 📘sa5-logic 🧪
    • 🔍About SA5's Logic Lib
      • Future
    • 🚀Quick Start | SA5 Logic Lib
    • If ❺🧪
    • Switch ❺🧪
  • 📘sa5-booking
    • 🔍About SA5's Booking Lib
    • 🚀Quick Start | SA5 Booking Lib
    • GetTimely ❺🧪
    • SimplyBook ❺🧪
  • 📘sa5-richtext
    • 🔍About SA5's Rich Text Lib
      • Future
    • 🚀Quick Start | SA5 Rich Text
    • Nested Lists ❺
      • Legacy Feature Notes
    • GitHub Gists ❺
      • ▶️Video Tutorials
      • Why Gist?
      • Technical Notes
      • Future
    • Code Blocks 🧪
      • Wrapping Code Blocks
      • Copy Code to Clipboard
    • Excalidraw ( SVG Embeds )
    • URL Expanders 🧪
    • Annotations 🧪
    • Text SPAN Formatting 🧪
    • Lightboxes 🧪
      • Future
    • Embeddables
    • Richtext ❺🧪
      • CSS Isolation
    • Blockquotes
    • Call-Outs
    • Responsive Inline Images
  • 📘sa5-table
    • HTML Tables
  • 📘sa5-kiosk 🧪
    • 🔍About SA5's Kiosk Lib
    • 🚀Quick Start | SA5 Kiosk
    • Usage Notes
    • Kiosk Hardware & Browser Setup
    • Kiosk Base 🧪
    • Inactivity Timer
    • Display Mode
    • Technical Notes
    • Future
      • Smart Watch Notes
    • ToDo
  • 📘sa5-hotkeys
    • 🔍About SA5's Hotkeys Lib
    • 🚀Quick Start | SA5 Hotkeys
    • Hotkeys ❺
      • Future
  • 📘sa5-commerce
    • Payment Providers
    • Price in Local Currency 🧪
  • 📘sa5-demo
    • Webflow Preview Link
  • 📘sa5-ui
    • 🔍About SA5's UI Lib
    • 🚀Quick Start | SA5 UI
    • 5-Star Ratings Component ❺
  • 📘sa5-cro
    • 🔍About SA5's CRO Lib
    • 🚀Quick Start | SA5 CRO
    • Conversion Tracking Event
  • 📘sa5-url
    • 🔍About SA5's Url Lib
    • 🚀Quick Start | SA5 Url
    • Query Param Passthrough
      • Future
    • External Link Targeting
    • Relative Link Fixups ⛔
  • 📘sa5-video
    • 🔍About SA5's Webflow Video Lib
    • 🚀Quick Start | SA5 Video
    • Background Video Poster
    • Triggers, Events & Actions
    • YouTube Hide Related Videos [BETA]
      • Styling Options
      • Future
    • Media Pop-Ups 🧪
    • Video Player ( Direct )
    • Video Controller File Format
    • Media Controller
    • Video Player Controller
      • Video Playback Spec 🧪
      • YouTube Video Data 🧪
      • Loom Video Data 🧪
  • 📘sa5-elements
    • 🔍About SA5's Elements Lib
      • Elements Lib Future Plans
    • 🚀Quick Start | SA5 Elements
    • Element Actions 🧪
    • Tabs Element
      • Tabs Future Plans
      • Triggers, Events & Actions 🧪
      • Tabs API
    • Slider Element
      • Triggers, Events & Actions 🧪
      • Slider JS API
      • Slider JS API Events
      • Advanced Slider Use
      • Future
    • Deck Controller Element ⛔
    • Button Element
      • Triggers, Events & Actions 🧪
    • Dropdown Element
      • Triggers, Events & Actions 🧪
      • Future
    • Lightbox Element
      • CMS Lightbox + Groups
      • CMS Lightbox + Captions
        • Popular Lightbox Setups
      • Lightbox JS API
      • Triggers, Events & Actions 🧪
      • SA5 Lightbox Future
    • Radio Button Element 🧪
      • Triggers, Events & Actions 🧪
    • Autocomplete Element
      • Styling
      • Future
    • Accordion Element
      • Accordion Future Plans
      • Triggers, Events & Actions 🧪
      • Accordion API
    • Lottie Element ❺🧪
      • Triggers, Events & Actions 🧪
    • Locale Switcher Element ❺🧪
      • Technical Notes
      • JavaScript API
  • 📘sa5-format
    • 🔍About SA5's Format Lib
    • 🚀Quick Start | SA5 Format
    • Format Numbers & Currencies ❺
    • Format Dates ❺
      • Use Cases
        • Custom Format a Date
        • Localize a Date
        • From and To Relative Timespans
        • Age
      • Future - Date formatting
      • Setup Your Date Field for Good Parsing
  • 📘sa5-user-accounts
    • 🔍About SA5's Webflow User Accounts Lib
    • 🚀Quick Start | SA5 User Accounts
    • Logged-In User Info ❺
      • Custom User Fields
      • Webflow's UserID
      • Access Groups
        • Using Access Groups for Conditional Visibility
        • Using Access Groups for Routing ❺🧪
      • The User object
        • The User Object Lifecycle
      • Tips & Best Practices
      • User Info FAQs
      • Troubleshooting
      • ⏩Future Plans & Ideas
      • BETA testing
      • Technical Notes - Interfaces
      • Future Development
    • Advanced Log-In & Sign-Up Flow ❺
    • Conditional Element Display ❺
    • Expand Login Button ❺
  • 📘sa5-track
    • 🔍About SA5's Tracking Lib
    • 🚀Quick Start | SA5 Tracking
    • Webflow Cookies & Storage Tracking ❺
      • Conditional Element Visibility
      • Tracking Page Visits
      • Tracking Button Clicks
      • Track Query String Params
      • Track Checkbox State
      • Cloneable Demo
    • SA5 Referer Tracking ❺🧪
    • Future Plans
      • Likes & Favorites Tracking ❺🧪
      • Recently Viewed Tracking ❺🧪
  • 📘sa5-modals
    • 🔍About SA5's Webflow Modals & Popups Lib
    • 🚀Quick Start | SA5 Modals & Popups
    • Webflow Popups & Modals
      • Triggers
      • Gating Modals
      • Modal Design & Styling Notes
      • Simple Modals v. Custom Modals
      • Modal JS API
      • Page-Specific Modal Control
      • Common Configurations
      • Pro-Tips
      • SA5 Modals Roadmap & Future
        • Future Attributes
        • Future Triggers
    • Dismissible Elements
    • Triggers, Events & Actions 🧪
    • Webflow Modals & Popups Auto-Open and Auto-Close
    • Side Panels 🧪
  • 📘sa5-selectcustom
    • 🔍About SA5's Custom Form Select Lib
    • 🚀Quick Start | SA5 Custom Form Select
    • Triggers, Events & Actions 🧪
    • Custom Form Select ❺🧪
  • 📘sa5-gallery
    • 🔍About SA5's Gallery Lib
    • 🚀Quick Start | SA5 Gallery
    • Gallery ❺🧪
      • Simple Collage Layout Engine
  • 📘sa5-effects
    • 🔍About SA5's Effects Lib
    • 🚀Quick Start | SA5 Effects
    • Depthmap (Fake 3D) Image ❺🧪
    • Image Zoom
  • 📘sa5-fixup
    • Viewport META
    • Webflow Fixups ❺
  • 📘sa5-countup
    • CountUp Animated Numbers
  • 📘sa5-seo
    • 🔍About SA5's SEO Lib
    • 🚀Quick Start | SA5 SEO
    • Noindex ❺🧪
    • Nofollow ❺🧪
    • JSON-LD ❺🧪
      • JSON-LD Article ❺🧪
      • JSON-LD Video ❺🧪
      • JSON-LD Course Info ❺🧪
      • JSON-LD WebPage
      • JSON-LD Sitelinks Searchbox ❺🧪
  • 📘sa5-core
    • SA5 Core ❺
    • Webflow Designer Support ❺
  • 📘sa5-embeds
    • 🔍About SA5's Embeds Lib
    • 🚀Quick Start | SA5 Embeds
    • Table Embeds ❺
      • Google Doc Table Embeds
        • Styling Table Embeds
      • Google Sheets Table Embeds
      • Future
  • 📘sa5-state
    • 🔍About SA5's State Lib
    • 🚀Quick Start | SA5 State
    • State ❺🧪
      • State Handlers
        • SA5 State Handler
        • MobX
        • Redux
  • 📘sa5-localization
    • 🔍About SA5's Localization Lib
    • 🚀Quick Start | SA5 Localization
    • Localization Functions
    • Locale URLs
    • Sort locales in the order you choose
  • 📘sa5-404
    • 🔍About SA5's 404 Lib
    • 🚀Quick Start | SA5 404
    • 404 Smart Search ❺
  • 📘sa5-calc
    • 🔍About SA5's Calc Lib
      • Future
    • 🚀Quick Start | SA5 Calc
    • Count & Sum Items ❺
      • Source Types
      • Calc Use Cases
  • 📘sa5-trigger ⛔
    • 🔍About SA5's Trigger Lib
    • 🚀Quick Start | SA5 Trigger
    • IX Triggers ( Legacy ) ❺
  • 📘Deprecated Features
    • Repeater ⛔
    • Lipsum Generator ⛔
    • JSON Formatter ⛔
Powered by GitBook
On this page
  • Demonstration
  • Use Cases
  • Navigation
  • Form input
  • Usage Notes
  • Dropdown Element
  • Input Element
  • List Item Elements
  • Matching
  • Secondary matching
  • FUTURE - Controlling the Matching Process
  • Controlling the Item's Click Action
  • Tips & Best Practices
  • Have more than 100 CMS items to match?
  • Site Search Item ( optional )
  • Styling
  • The Dropdown Element
  • The Dropdown Toggle
  • The Dropdown List
  • The Dropdown List Items
  • Technical Notes
  • Getting Started ( NOCODE )
  • STEP 1 - Add the Library
  • STEP 2 - Apply the custom attributes to the elements you want to affect

Was this helpful?

  1. sa5-elements

Autocomplete Element

A CMS-capable dropdown UI that makes it easier to navigate & choose items from longer lists.

Last updated 10 months ago

Was this helpful?

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

To identify a dropdown as an SA5 autocomplete element, place this custom attribute on the Dropdown element itself.

wfu-autocomplete = ( name )

The name is used to identify the element in the future JS API for this element, however it is not currently used and can be left blank.

Input Element

You'll place a form and an input element within the dropdown's toggle element so that it is always visible and accessible to your users.

Place this attribute on the input element directly;

wfu-autocomplete-input = ( no value needed )

Within the list portion of the dropdown, you'll place the elements you want to appear. This can include a collection list, and/or static items.

List Item Elements

Place this attribute directly on the list items you want to be matched & filtered;

wfu-autocomplete-item = ( no value needed )

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 ).

Do not use this attribute on list items that should not be filtered, for example a Site Search item.

wfu-autocomplete-item-layout defines the layout the item should use when made visible.

  • block ( default )

  • flex

  • grid

  • etc.

Use this when you are using a special layout for your list items, e.g. a flex layout to display an icon next to your text.

FUTURE. attributes applied to the parent of the list items ( the dropdown list itself ) can be used as a fallback default.

Matching

Matching refers to the process by which SA5 selects items that match your currently entered string, as you're typing. Currently, matching is case-insensitive, and can occur anywhere in the string.

Your individual items define a matching string, and we compare your query with those strings to identify the matches.

Specify the matching string you want using this attribute on the list items;

wfu-autocomplete-item-match= ( match string, typically bound to a CMS field )

Typically this attribute is bound to a CMS field such as the name or title of the item.

For example, if you have an item with a match string of Chicago pizza shops and someone begins typing pizz it will match, as would chi or shop. As long as the query string exists within the match string, it's considered a match.

Secondary matching

You can also specify a second string that will also be considered for matching, in the same way.

wfu-autocomplete-item-match-secondary = ( match string, typically bound to a CMS field )

Typically this attribute is bound to a CMS field such as a list of keywords that are relevant to the item, but do not exist in the title.

FUTURE - 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

wfu-autocomplete-matching-rule

  • Default - anywhere in the string, case-insensitive

  • FUTURE - Start of string only, case-insensitive

  • FUTURE - Regex, specific string?

  • FUTURE - 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 navigate

  • search. 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

STEP 2 - Apply the custom attributes to the elements you want to affect

See above for details.

First, add the library as detailed in .

📘
https://icons.relume.io/
Quick Start