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.
<!DOCTYPE html><html>
<head>
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2> Blaze UI Autocomplete </h2>
<blaze-autocomplete></blaze-autocomplete>
</body>
</html>
|
Output:
Blaze UI Autocomplete
Example 2: The following code demonstrates the Blaze UI autocomplete feature using the Blaze UI autocomplete tag with a placeholder attribute.
<!DOCTYPE html><html>
<head>
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2> Blaze UI Autocomplete </h2>
<blaze-autocomplete placeholder="Enter some text...">
</blaze-autocomplete>
</body>
</html>
|
Output:
Blaze UI Autocomplete
Reference: https://www.blazeui.com/components/autocomplete/