Blaze UI Autocomplete Methods - Coding

Blaze UI is a free open-source UI Toolkit that provides a great 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 Methods. The Autocomplete component has only one method named setItems() to set the autocomplete suggestions.

Blaze UI Autocomplete Methods:

setItems: This method is used to set the menu item list. The list becomes visible when the component is in focus. This method accepts an array of objects with properties named id and text as parameters and returns nothing to the caller.

Syntax:

const el = document.querySelector('blaze-autocomplete');
await el.setItems([...]);

Example 1: Below is an example in which we set the Blaze UI Autocomplete menu items to “GfG”, “GeeksforGeeks”, and “GfG Practice”.

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 style="padding:100px;"> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
    <h2> Blaze UI Autocomplete Methods </h2> 
    <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: "GfG" }, 
                { id: 2, text: "GeeksforGeeks" }, 
                { id: 3, text: "GfG Practice" } 
            ]); 
        })(); 
    </script> 
</body> 
</html>

Output:

Example 2: In this example, we used the filter event of the autocomplete to generate demo items based on the value user entered in the field.

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 style="padding:50px;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h2> Blaze UI Autocomplete Methods </h2> 
    <blaze-autocomplete id="gfg"></blaze-autocomplete> 
  
    <script> 
        (async () => { 
            await customElements.whenDefined('blaze-autocomplete'); 
            const el = document.querySelector('blaze-autocomplete'); 
  
            el.addEventListener('filter', (e) => { 
                fillAutoComplete(e); 
            }) 
        })(); 
  
        function fillAutoComplete(event) { 
            var toFill = []; 
            if (event.detail) { 
                for (var i = 0; i < 5; i++) { 
                    var text = event.detail; 
                    for (var j = 0; j < i; j++) { 
                        text += " "; 
                        text += event.detail; 
                    } 
                    toFill.push({ id: i, text: text }); 
                } 
            } 
            event.target.setItems(toFill); 
        } 
    </script> 
</body> 
  
</html>

Output:

Reference: https://www.blazeui.com/components/autocomplete

Reffered: https://www.geeksforgeeks.org

CSS

Related
Design a Carousel Column Expansion Animation Effect on Hover using CSS
How to fix weird behaviors of floating elements using CSS ?
Foundation CSS Abide Accessibility
How to apply CSS style to the different elements having same class name in HTML ?
Explain the concept of Tweening in CSS

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	11