Blaze UI Autocomplete
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/css@x.x.x/dist/blaze/blaze.css" > < script type = "module" src = "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js" > </ script > </ head > < body > < h1 style = "color: green;" > w3wiki </ 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/css@x.x.x/dist/blaze/blaze.css" > < script type = "module" src = "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js" > </ script > </ head > < body > < h1 style = "color: green;" > w3wiki </ h1 > < h2 > Blaze UI Autocomplete </ h2 > < blaze-autocomplete placeholder = "Enter some text..." > </ blaze-autocomplete > </ body > </ html > |
Output:
Reference: https://www.blazeui.com/components/autocomplete/
Contact Us