Skip to main content

Advanced Component-Auto-Complete

Intro​

An autocomplete component in a web app is a user interface element that assists users by suggesting and completing input based on their partial entries, enhancing efficiency in tasks such as searching, form filling, or data selection.

In this video tutorial, you will learn about an auto-complete component—an interface element designed to assist users in inputting data more efficiently. This component suggests possible matches or completions as users type, enhancing the overall user experience.

1. Bind the Event​

Go to the page and drop a component, say, Collection Form. Open the Settings of this form from the right-click of the circular icon. Then choose the collection and event from the dropdown to bind.

DrapCode Builder Collection Constructor

2. Drop the Auto-Complete Component​

From Components choose Auto-Complete Input component and add to the collection form. Then right-click the circular icon to configure its settings. In the box that appears choose the collection, filter and auto-complete field to run this component.

DrapCode Builder Collection Constructor

3. Preview Changes​

Click Preview and add data entry in the preview page to view them in the collection.

DrapCode Builder Collection Constructor

3.1 Test Changes​

Then type any collection entry in the preview page to have it auto-filled for you.

DrapCode Builder Collection Constructor

Conclusion:​

Autocomplete components enhance user efficiency by speeding up data entry and selection processes, reducing the need for manual input and minimizing errors.