Blaze UI Autocomplete Methods

Blaze UI is a free open-source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

In this article, we will be seeing Blaze UI Autocomplete Methods. The Autocomplete component has only one method named setItems() to set the autocomplete suggestions.

Blaze UI Autocomplete Methods:

• setItems: This method is used to set the menu item list. The list becomes visible when the component is in focus. This method accepts an array of objects with properties named id and text as parameters and returns nothing to the caller.

Syntax:

const el = document.querySelector('blaze-autocomplete');
await el.setItems([...]);

Example 1: Below is an example in which we set the Blaze UI Autocomplete menu items to "GfG", "GeeksforGeeks", and "GfG Practice".

Output:

👁 Image

Example 2: In this example, we used the filter event of the autocomplete to generate demo items based on the value user entered in the field.

Output:

👁 Image

Reference: https://www.blazeui.com/components/autocomplete/