Open In App

Blaze UI Autocomplete Methods

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <script type="module" src=
    </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=
    <script type="module" src=
    </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



Last Updated : 21 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads