Primer CSS Autocomplete Suggester

Last Updated : 05 May, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS Autocomplete Suggester is used to show suggestions when we type in the text area using the .suggester class. To show suggestions, we will use <text-expander> element.

Primer CSS Autocomplete Suggester Class:

suggester: This class is used to give suggestions.

Syntax:

<div class="form-group position-relative">
  <textarea class="form-control width-full" 
              placeholder="...">
      ...
  </textarea>
  <ul class="suggester suggester-container" 
        role="listbox">
       ....
  </ul>
</div>

Example 1: This example demonstrates the Primer CSS Autocomplete Suggester.

HTML

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> Primer CSS Autocomplete Suggester </title> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success">  
            GeeksforGeeks  
        </h1> 
        <h3>  
            Primer CSS Autocomplete Suggester  
        </h3> <br> 
          
        <div class="form-group position-relative"> 
            <textarea class="form-control width-full" 
                      placeholder="Welcome to GeeksforGeeks"> 
                I am expert in  
            </textarea> 
  
            <ul class="suggester suggester-container" 
                role="listbox" 
                style="top: 4px; left: 160px;"> 
                <li> 
                    Java    
                </li> 
                <li> 
                    Python 
                </li> 
            </ul> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Primer CSS Autocomplete Suggester

Example 2: This example demonstrates the Primer CSS Autocomplete Suggester.

HTML

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> Primer CSS Autocomplete Suggester </title> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success">  
            GeeksforGeeks  
        </h1> 
        <h3>  
            Primer CSS Autocomplete Suggester  
        </h3> <br> 
          
        <div class="form-group position-relative"> 
            <textarea class="form-control width-full" 
                      placeholder="Welcome to GeeksforGeeks"> 
                I am expert in  
            </textarea> 
  
            <ul class="suggester suggester-container" 
                role="listbox" 
                style="top: 4px; left: 160px;"> 
                <li class="color-bg-accent-emphasis"> 
                    <svg class="octicon" viewBox="0 0 16 16" 
                        xmlns="http://www.w3.org/2000/svg" 
                        width="16" height="16" > 
                        <path fill-rule="evenodd"
                            d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5  
                            0 000-13zM0 8a8 8 0 1116 0A8 8 0 010  
                            8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 
                            01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 
                            010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 
                            100-2 1 1 0 000 2z"> 
                        </path> 
                    </svg> 
                    Java    
                </li> 
                <li class="color-bg-done-emphasis"> 
                    Python 
                </li> 
                <li class="color-bg-severe"> 
                    C++ 
                </li> 
            </ul> 
        </div> 
    </div> 
</body> 
  
</html>