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 =
< 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.
HTML
<!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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...