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>
Output:
Primer CSS Autocomplete Suggester
Reference: https://primer.style/css/components/autocomplete#suggester
Similar Reads
Primer CSS Autocomplete Primer CSS is a free open-source CSS framework that's created upon systems that make the insights of the essential style elements like spacing, typography, and color. This methodical system makes sure its patterns are steady and interoperable with every other. It's largely reusable and adaptable. Â I
3 min read
React Suite Autocomplete Basic React Suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we’ll learn about React Suite Autocomplete Basic
3 min read
CSS AutoComplete font size In this article, we will learn about How we can set custom CSS AutoComplete Font Size. AutoComplete Font Size refers to the font size of the autocomplete text suggested by the browser. These suggestions are made on the basis of the data entered in the input box in the past. However, there is no offi
2 min read
React Suite Autocomplete custom render item React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we’ll learn about React suite Autocomplete custo
2 min read
React Suite Autocomplete controlled React Suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we’ll learn about React Suite Autocomplete contr
3 min read