Blaze UI Autocomplete Attributes

Last Updated : 26 Apr, 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.

In this article, we will be seeing Blaze UI Autocomplete Attributes. 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 Attributes:

placeholder: There is only one attribute for the Autocomplete component named placeholder.

Syntax:

<blaze-autocomplete placeholder="...">
</blaze-autocomplete>

Example 1: This example shows the use of the placeholder attribute of the autocomplete component.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Blaze UI - Autocomplete Attributes</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
  
    <style> 
        body { 
            font-family: sans-serif; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;">  
            GeeksforGeeks 
        </h2> 
          
        <h3>Autocomplete Attributes - Blaze UI</h3> 
    </div> 
  
    <div class="u-window-box-super u-centered"> 
        <b>Autocomplete without <i>placeholder</i> attribute</b> 
        <br> 
        <blaze-autocomplete id="autocomplete1"></blaze-autocomplete> 
        <br> 
        <b>Autocomplete with <i>placeholder</i> attribute</b> 
          
        <blaze-autocomplete id="autocomplete2" 
            placeholder="This is placeholder text."> 
        </blaze-autocomplete> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Autocomplete Attributes

Example 2: This example shows the use of the placeholder attribute on different sizes of autocomplete components.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI - Autocomplete Attributes </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
  
    <style> 
        body { 
            font-family: sans-serif; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
          
        <h3> Autocomplete Attributes - Blaze UI </h3> 
    </div> 
  
    <div class="u-window-box-super u-centered"> 
        <b> 
            Extra-Small Sized Autocomplete with  
            <i>placeholder</i> attribute 
        </b> 
          
        <blaze-autocomplete class="u-xsmall" 
            placeholder="This is placeholder text."> 
        </blaze-autocomplete> 
        <br> 
  
        <b> 
            Small Sized Autocomplete with  
            <i>placeholder</i> attribute 
        </b> 
          
        <blaze-autocomplete class="u-small" 
            placeholder="This is placeholder text."> 
        </blaze-autocomplete> 
        <br> 
  
        <b> 
            Medium Sized Autocomplete with  
            <i>placeholder</i> attribute 
        </b> 
          
        <blaze-autocomplete class="u-medium" 
            placeholder="This is placeholder text."> 
        </blaze-autocomplete> 
        <br> 
  
        <b> 
            Large Sized Autocomplete with  
            <i>placeholder</i> attribute 
        </b> 
          
        <blaze-autocomplete class="u-large" 
            placeholder="This is placeholder text."> 
        </blaze-autocomplete> 
        <br> 
  
        <b> 
            Extra-Large Sized Autocomplete with  
            <i>placeholder</i> attribute 
        </b> 
          
        <blaze-autocomplete class="u-xlarge" 
            placeholder="This is placeholder text."> 
        </blaze-autocomplete> 
        <br> 
          
        <b> 
            Super-Sized Autocomplete with  
            <i>placeholder</i> attribute 
        </b> 
          
        <blaze-autocomplete class="u-super" 
            placeholder="This is placeholder text."> 
        </blaze-autocomplete> 
    </div> 
</body> 
  
</html>