Blaze UI Autocomplete

Last Updated : 13 Jun, 2022

Blaze UI is a free open-source UI toolkit that provides a strong and maintainable foundation to develop scalable web solutions. All the components of Blaze UI are developed mobile-first and rely on native browser features, not on any additional library or framework.

Blaze UI provides autocomplete feature, autocomplete feature allows users to easily identify and pick from a pre-populated list of values as they input, utilizing searching and filtering.

Blaze UI Autocomplete Attribute: The Autocomplete component has only an optional attribute named placeholder that accepts a string value which is the initial text displayed in the input field.

Blaze UI Autocomplete Methods:

setItems: This method is used to set the menu items list.

Blaze UI Autocomplete Events:

filter: This event is triggered when the user types in the input passing the value of the text box.
select: This event is triggered when a menu item is chosen.

Blaze UI Autocomplete Tag:

blaze-autocomplete: This tag is used to add the autocomplete feature to the website.

Syntax:

<blaze-autocomplete placeholder="...">
</blaze-autocomplete>

Example 1: The following code demonstrates the Blaze UI Autocomplete feature.

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
          href=
"https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css">
    <script type="module" 
            src=
"https://unpkg.com/@blaze/[email protected]/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
</head>

<body>
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1>
    <h2> Blaze UI Autocomplete </h2>
    <blaze-autocomplete></blaze-autocomplete>
</body>

</html>

Output:

Example 2: The following code demonstrates the Blaze UI autocomplete feature using the Blaze UI autocomplete tag with a placeholder attribute.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet"
          href=
"https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css">
    <script type="module"
            src=
"https://unpkg.com/@blaze/[email protected]/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
</head>

<body>
    <h1 style="color: green;"> 
        GeeksforGeeks
    </h1>
    <h2> Blaze UI Autocomplete </h2>
    <blaze-autocomplete placeholder="Enter some text...">
    </blaze-autocomplete>
</body>

</html>