How to Display Suggestions for Input Field in HTML ?

Last Updated : 23 Jul, 2024

In most cases, there is a field on forms that allows for auto-completion of user input. This can be achieved using the HTML <datalist>. The <datalist> tag works with the input tag to enable users to quickly fill in data on forms by presenting them with a dropdown list of pre-defined options. In this article, we will explain how to create an input suggestion form using HTML and CSS, and demonstrate how to use the <datalist> tag to enable the auto-completion feature on your website.

Note: The element's id attribute used in the <datalist> tag should be equal to the element's list attribute in the <input> tag which will help to bind them together.

Syntax:

<datalist> ... </datalist>

Preview:

Approach:

Create a div with the class as a container. Inside this div, create another div with a class as a 'text container' that will contain the <input> tag & <datalist> tag.
Declare the list attribute as a text container inside the <input> tag. Similarly, declare the id attribute as the same as the list attribute, inside the <datalist> tag.
Now, create the drop-down list of programming languages for building the pre-defined options.

We have used google font to build some awesome input forms & for decorating the text. In order to use the google font, we need to import the following font URL in our stylesheet.

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

Example : This example illustrates the use of the <datalist> tag to make input suggestions in HTML.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Favorite Programming Language Selector</title>
    <style>
        @import url(
"https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Roboto Condensed", sans-serif;
            background-color: #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            background: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 40px;
            max-width: 600px;
            width: 100%;
        }

        h1 {
            font-size: 2.5em;
            color: green;
            margin-bottom: 20px;
            text-align: center;
        }

        h3 {
            font-size: 1.5em;
            color: #555;
            margin-bottom: 20px;
            text-align: center;
        }

        label {
            font-size: 1.1em;
            color: #333;
            display: block;
            margin-bottom: 10px;
        }

        input[type="text"] {
            width: 100%;
            height: 50px;
            padding: 0 15px;
            font-size: 1em;
            border: 1px solid #ddd;
            border-radius: 5px;
            outline: none;
            transition: border-color 0.3s;
        }

        input[type="text"]:focus {
            border-color: #4CAF50;
        }


        datalist {
            display: none; 
        }

        .text-container {
            position: relative;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <h3>HTML datalist Tag</h3>
        <label for="programmingLanguages">
            Choose Your Favourite Programming Language:
        </label>
        <div class="text-container">
            <input type="text" list="programmingLanguages" placeholder="Enter Here" />
            <datalist id="programmingLanguages">
                <option value="Objective C">Objective C</option>
                <option value="C++">C++</option>
                <option value="C#">C#</option>
                <option value="Cobol">Cobol</option>
                <option value="Go">Go</option>
                <option value="Java">Java</option>
                <option value="JavaScript">JavaScript</option>
                <option value="Python">Python</option>
                <option value="PHP">PHP</option>
                <option value="Pascal">Pascal</option>
                <option value="Perl">Perl</option>
                <option value="R">R</option>
                <option value="Swift">Swift</option>
            </datalist>
        </div>
    </div>
</body>

</html>