Autocomplete search with CMS

The Webflow Advanced Search with Autocomplete script enhances your Webflow site with powerful search capabilities. It provides real-time filtering of CMS items, keyboard navigation, and customizable search result actions.

Get Started

Overview

Solution Highlights

Real-time Search
Autocomplete Functionality
Keyboard Navigation
Keyboard Shortcut
Customizable Search Actions
No Results Handling
Form Submission Control

The Advanced Search solution includes several keyboard shortcuts and navigation features to enhance user experience:

Shortcut	Action
Ctrl + K (Cmd + K on Mac)	Focus the search input
↓ (Down Arrow)	Move focus to the next search result
↑ (Up Arrow)	Move focus to the previous search result
Enter	Select the currently focused search result
Esc (Escape)	Clear the search input and hide results

Script

Copy the <script> & paste in </body>

<script src="https://cdn.jsdelivr.net/gh/shreyas-ws/autocomplete-search-with-cms@main/autocomplete-search-cms.min.js"></script>

Copy Script

<script src="https://cdn.jsdelivr.net/gh/shreyas-ws/autocomplete-search-with-cms@main/autocomplete-search-cms.min.js"></script>

Copy Component

Documentation

Apply attributes to elements on the page

Form

Add a custom attribute to the Form inside Form Block

Name

tu-autosearch-element

Value

search-form

This attribute identifies the main form container for the search functionality.

Do's:

Apply this to the outermost form element that contains all search-related elements.
Ensure only one element on the page has this attribute (unless implementing multiple independent search forms).

Don'ts:

Don't apply this to inner elements or non-form elements.
Avoid using this attribute on elements not related to the search functionality.

Notes:

This is a required attribute for the search functionality to work properly.
Apply this to the Form element.

Form Submit Action

Add a custom attribute to the Form along with the

Form

Name

tu-autosearch-form-submit

Value

false

This attribute prevents the form from being submitted when the user presses Enter.

Do's:

Use this when you want to handle the search entirely via JavaScript without page reloads.
Set the value explicitly to "false" for the intended behavior.

Don'ts:

Don't use this if you want to allow traditional form submission.
Avoid setting this to any value other than "false" if you intend to prevent submission.

Notes:

If omitted or set to any other value, the form will submit normally.
This is particularly useful for single-page applications or when you want to provide a seamless search experience without page refreshes.

Search Input

Add a custom attribute to an input field [type=text]

Name

tu-autosearch-element

Value

search-input

This attribute identifies the main search input field.

Do's:

Apply this to the text input element where users will type their search queries.
Ensure only one element has this attribute per search form.

Don'ts:

Don't apply this to non-input elements or hidden fields.
Avoid using this on multiple input fields within the same search form.

Notes:

This is a required attribute for the search functionality to work.
In Webflow, apply this to the Form Text Input element inside your Form Block.

Search Results Container

Add a custom attribute to a div block containing the

Collection List Wrapper

Name

tu-autosearch-element

Value

search-results

This attribute identifies the outer container where search results will be displayed.

Do's:

Apply this to a div or similar container element that will hold the search result list and items.
Ensure this container is a parent of your Collection List if using Webflow CMS.

Don'ts:

Don't apply this to the Collection List itself or individual search result items.
Avoid using this on elements that should not be manipulated by the search script.

Notes:

This container's visibility will be toggled by the script based on search activity.
If using with Webflow CMS, apply this to a div that contains your Collection List.

Search Results List

Add a custom attribute to the

Collection List

Name

tu-autosearch-element

Value

search-results-list

This attribute identifies the immediate parent of the search result items, typically the Collection List in Webflow.

Do's:

Apply this to the Collection List element in Webflow.
Ensure this element is a child element to tu-autosearch-element="search-results".

Don'ts:

Don't apply this to the outer container or individual search result items.
Avoid using on non-list elements or containers that don't directly wrap search result items.

Notes:

This is crucial for proper functioning when using Webflow's Collection Lists.
The script uses this to correctly identify and manipulate the list of results.

No Results Message

Add a custom attribute to a div block to display a message when no search results found.

Name

tu-autosearch-element

Value

empty

This attribute identifies the element that displays a message when no search results are found.

Do's:

Apply this to a div or text element that contains your "No results found" message.
Style this element appropriately to match your design.

Don'ts:

Don't apply this to elements that should always be visible.
Avoid putting this outside of the search results container.

Notes:

The script will automatically show/hide this element based on search results.
Initially set this element's display to 'none' in Webflow's style settings.

Search Result Item

Add a custom attribute to

Collection List Item

Name

tu-autosearch-element

Value

search-result-item

This attribute identifies individual search result items.

Do's:

Apply this to each item in your search results list.
If using Webflow CMS, apply this to the Collection List Item.

Don'ts:

Don't apply this to the container of all search results or the Collection List itself.
Avoid using on elements that aren't part of the search results.

Notes:

Each item with this attribute will be filtered and displayed based on the search query.
Ensure all searchable content is contained within elements with this attribute.
In Webflow, this should be on the Collection Item, not on individual elements within the item.

Search Item Select

Add a custom attribute to

Collection List Item

Name

tu-autosearch-element

Value

autocomplete

Name

tu-autosearch-element

Value

open-link

This attribute defines the action to be taken when a search result item is selected.

Do's:

Use "autocomplete" if you want the search input to be filled with the selected item's text.
Use "open-link" if you want to navigate to a link contained within the search result item.
Apply this attribute to the same element that has tu-autosearch-element="search-result-item".

Don'ts:

Don't use both "autocomplete" and "open-link" on the same element.
Avoid using values other than "autocomplete" or "open-link".

Notes:

For "open-link" action, ensure the item contains an <a> tag with the desired link.
The "autocomplete" action is useful for search suggestions or filtering, while "open-link" is better for navigating to specific pages.

Active Class on Focus

Optional

Add a custom attribute to

Search Result Item

Name

tu-autosearch-element

Value

is-active

This attribute specifies the class name to be added to a search result item when it's active or focused.

Do's:

Apply this to the same element that has tu-autosearch-element="search-result-item".
Use a class name that's specific to your active state styling.
Create corresponding CSS styles for the class you specify.

Don'ts:

Don't use class names that conflict with existing Webflow classes.
Avoid using overly generic class names that might interfere with other styles.

Notes:

The class specified here will be dynamically added/removed by the script as users navigate through results.
This is particularly useful for keyboard navigation, allowing you to style the currently focused item.
Example usage: tu-autosearch-class="is-focused" or tu-autosearch-class="search-item-active".

DEMO

Autocomplete search with CMS Demo

Need Webflow design or development services on Demand?

We offer on demand services that give you the flexibility to design pages and build them on Webflow as and when needed. No wait times and quick turnarounds.

Go to Tuesday