Blaze UI Autocomplete Events
Last Updated :
21 Dec, 2022
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.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script type="module" src=
</script>
</head>
<body class="m-2">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2> Blaze UI Autocomplete Events </h2>
<blaze-alert id="myAlert" type="warning">
<i>filter</i> Event Triggered
</blaze-alert>
<blaze-autocomplete id="gfg">
</blaze-autocomplete>
<script>
(async () => {
await customElements.whenDefined('blaze-autocomplete');
const el = document.querySelector('blaze-autocomplete');
el.addEventListener('filter', (e) => {
const alert = document.querySelector('blaze-alert#myAlert');
alert.show();
})
})();
</script>
</body>
</html>
|
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.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script type="module" src=
</script>
</head>
<body class="m-2">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2> Blaze UI Autocomplete Events </h2>
<blaze-alert id="myAlert" type="info">
<i>selected</i> Event Triggered
</blaze-alert>
<blaze-autocomplete id="gfg"></blaze-autocomplete>
<script>
(async () => {
await customElements.whenDefined('blaze-autocomplete');
const el = document.querySelector('blaze-autocomplete');
await el.setItems([
{ id: 1, text: "AutoComplete Option 1" },
{ id: 2, text: "AutoComplete Option 2" },
{ id: 3, text: "AutoComplete Option 3" }
]);
el.addEventListener('selected', (e) => {
const alert = document.querySelector('blaze-alert#myAlert');
alert.show();
})
})();
</script>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/autocomplete/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...