How to Add Autocomplete to Webflow Step-by-Step Guide

Introduction

Adding autocomplete functionality to your Webflow site can enhance user experience and streamline search capabilities, especially for content-rich websites like blogs or product listings. This feature provides suggestions as users type in a search field, making it easier to find what they’re looking for without scrolling through endless categories or products.

In this blog, we will explore how to integrate autocomplete.js, a lightweight JavaScript library, into your Webflow site to add autocomplete functionality to your CMS collections. By the end of this blog, you’ll have a dynamic, searchable feature on your Webflow project that enhances both usability and efficiency.

If you’re ready to boost your Webflow project, Discover how Webflow features can enhance your site and bring your vision to life!

Why Use Autocomplete.js for Webflow?

Autocomplete.js is a simple and flexible library, just 9 KB, allowing you to add robust autocomplete functionality to any input field in your Webflow project. It’s especially useful for large CMS collections, as it helps users quickly narrow down their options by typing a few characters. Imagine typing “ham” and instantly seeing suggestions like “graham crackers,” “champagne,” or “split pea and ham soup,” or typing “wine” and getting “Cave Springs dry Riesling.”

With its simplicity and flexibility, Autocomplete.js is a fantastic tool for adding search functionality without burdening your website with heavy scripts.

Features of Autocomplete.js:

• Lightweight and fast
• Supports dynamic data from CMS collections
• Easy to style and configure
• Fully customizable

Project Setup

We’ll be setting up a Webflow project from scratch for this blog. If you’ve seen our previous blogs on setting up CMS Nest and CMS Filter, this will feel familiar. We’re going to reuse an example blog for demonstration purposes, where we can search by categories. Let’s dive into the setup process.

Step 1: Basic Webflow Setup

The first step is to create a basic structure in Webflow.

Add Search Input Field

1. Create a search input field in your Webflow project where users can type their search queries.
2. Add a CMS collection for your data — in this case, we’ll be using categories.
3. For each category, add a tag and a link so that each search result will lead to relevant content.

This initial setup will allow us to proceed with the configuration of the autocomplete functionality.

Adding autocomplete functionality to your Webflow site not only streamlines search capabilities but also complements other features like filtering. For more insights on optimizing your content presentation, check out our guide on How to Filter a Webflow CMS Collection to enhance user navigation even further.

Step 2: Integrate Autocomplete.js

Now that our Webflow page is set up, let’s integrate Autocomplete.js.

1. Add the Autocomplete.js Script

First, we need to import the Autocomplete.js script into our Webflow project. The library is available via a CDN, and we’ll be using this method for easy integration.

• Go to the Autocomplete.js documentation and copy the CDN link.
• Open your Webflow project’s page settings.

Under the Head section, paste the Autocomplete.js script, ensuring you include the defer attribute so it loads properly after other scripts (such as CMS Nest and CMS Filter).
Html
Copy code:
<script defer src=”https://cdn.deliver.net/npm/@tarekraafat/autocomplete.js@8.0.0/dist/js/autoComplete.min.js”></script>

2. Add CSS for Autocomplete

Next, we need to style the autocomplete suggestions. Autocomplete.js provides a few default CSS options, but you can fully customize the styling later if desired.

For now, copy the default CSS from the documentation and paste it into the Head section of your page, above all other styles.

Copy code:

“`HTML

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@8.0.0/dist/css/autoComplete.min.css”>

3. Set Up HTML Structure

Now, add an ID to your search input field for easy reference by Autocomplete.js.

• Select your search input field in Webflow.

Give it the ID autocomplete.
Html
Copy code
<input type=”text” id=”autocomplete” placeholder=”Search Categories…”>

Take your Webflow site to the next level. Start your journey with Webflow and unlock powerful design capabilities today.

Step 3: Configuring the Autocomplete Engine

Now that the script and CSS are in place, we need to initialize the Autocomplete.js engine and configure it to work with our CMS data.

1. Access CMS Data

First, you need to gather all the CMS data (categories in this case) and ensure you can pass this data into Autocomplete.js. The code snippet below demonstrates how to select all the categories using a custom attribute:

Copy code

let categories = document.querySelectorAll(‘[wb-autocomplete=”category”]’);

To avoid duplicates (which can happen if categories are repeated in your CMS), we can use a JavaScript Set to store unique categories:

Copy code

let categorySet = new Set();

categories.forEach(category => {

  categorySet.add(category.textContent);

});

let uniqueCategoriesArray = […categorySet];

2. Initialize Autocomplete.js

With the categories loaded, it’s time to initialize Autocomplete.js. This is done by creating a new instance of the engine and providing configuration options like the data source, input selector, and various thresholds for when the suggestions should appear.

javascript

Copy code

const autoCompleteJS = new autoComplete({

  selector: “#autocomplete”,  // Input element ID

  data: {

    src: uniqueCategoriesArray,  // Data array

  },

  threshold: 1,  // Minimum characters before search starts

  debounce: 300,  // Milliseconds to wait before showing suggestions

  results list: {

    render: true,

    container: source => {

      source.setAttribute(“id”, “category-list”);

    }

  },

  resulted: {

    highlight: true,  // Highlights the matching characters

  },

  events: {

    input: {

      selection: event => {

        const feedback = event.detail;

        const selection = feedback. selection. value;

        document.querySelector(“#autocomplete”).value = selection;  // Fill input field

      }

    }

  }

});

Explanation:

• Selector: Specifies the input field where autocomplete will be applied.
• Data Source: We use our unique Categories Array as the data for the autocomplete suggestions.
• Threshold: Sets the minimum number of characters users must type before autocomplete starts (in this case, 1 character).
• Debounce: The time in milliseconds before suggestions appear. A higher number helps in filtering large datasets without delay.
• ResultItem: The highlight option is set to true, which will bold the matching characters in the suggestions.

Want to add autocomplete functionality to your Webflow project? Join Webflow now and explore seamless integration options!

Step 4: Customize and Style the Autocomplete

Now that autocomplete is working, we can move on to styling and further customization.

Customize CSS

You can modify the CSS to match the design and branding of your website. For instance, to change the look of the suggestions list, you can add custom CSS:

CSS

Copy code

#category-list {

  background-color: #fff;

  border: 1px solid #ccc;

  list-style: none;

  max-height: 200px;

  overflow-y: auto;

}

#category-list div {

  padding: 10px;

  cursor: pointer;

}

#category-list div: hover {

  background-color: #f1f1f1;

}

This CSS gives a clean and minimalistic look to the suggestions list while ensuring it integrates smoothly with the rest of your website.

Step 5: Test Your Autocomplete Feature

Once everything is set up, test the autocomplete functionality on your published Webflow site. Open Chrome DevTools to inspect for any potential issues or errors and refine the experience further.

1. Begin typing into the search input.
2. Autocomplete suggestions should appear based on the categories in your CMS.
3. Clicking on a suggestion should fill the search input with that option.

Enhance Your Webflow Site with Custom Filters, Integrations & Performance Optimization

At Axiabits, we specialize in elevating your Webflow experience by offering solutions for search and filter functionalities, seamless integrations, and enhanced website performance. Whether you’re looking to implement dynamic filters, CMS-powered components, or streamline your site’s functionality, our team is here to help.

Need personalized assistance for your Webflow project? Book now and let’s get started! We’ll guide you through every step so that you can fully optimize and prepare your site to perform.

Conclusion

Adding autocomplete.js to your Webflow project is a fantastic way to improve the user experience by providing real-time search suggestions. This functionality is especially beneficial for content-rich websites, helping users quickly navigate through large collections.

Enhance your user experience with Webflow’s design features. Get started with Webflow and see the difference in just a few clicks!

Disclaimer 

This article features affiliate links, which indicates that if you click on any of the links and make a purchase, we may receive a small commission There’s no extra cost to you and it aids in supporting our blog, enabling us to keep delivering valuable content. We solely endorse products or services that we think will benefit our audience.

Frequently Asked Questions