Blaze UI is a free open-source UI Toolkit that provides an excellent 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 Events. For the autocomplete component, there are two events named filter and selected, listed below.

Blaze UI Autocomplete Events:

• filter: This event is triggered when the user types something in the autocomplete input. It passes the value of the input as the event value.
• selected: This event is triggered when the user selects an autocomplete option.

Syntax:

const el = document.querySelector('blaze-autocomplete');

el.addEventListener('event-name', (e) => {
    ...
});

Example 1: In this example, we listen to the filter event and show a blaze alert message when it is triggered.

Output:

 

Example 2: In this example, we used the selected event of the autocomplete component to show an alert message when an item is selected.

Output:

 

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