How to Create Search Menu with HTML, CSS, and JavaScript

Introduction

A fully functional search menu allows users to search through a list of data, such as a list of items, names, or articles. When users type in the search field, the search menu filters through the data and displays only the matching results. In this tutorial, we will create a simple and functional search menu using HTML, CSS, and JavaScript.

Create the HTML Structure: Set up the search input field and an area to display search results.
Style the Search Menu Using CSS: Add CSS to make the search bar and the results look clean and responsive.
Add JavaScript to Handle Search Functionality: Use JavaScript to filter and display the search results dynamically.
Create Sample Data: Add a set of sample data that users can search through.

Step 1: Create the HTML Structure

We’ll start by creating a simple HTML structure with a search input field and a <div> to display the search results.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Functional Search Menu</title>
</head>
<body>

    <!-- Search bar structure -->
    <div class="search-container">
        <input type="text" id="search-input" placeholder="Search here..." onkeyup="performSearch()">
    </div>

    <!-- Search results container -->
    <div id="search-results" class="results"></div>

</body>
</html>

Explanation:

The input field will allow users to type their search query.
The div with the id search-results will hold and display the filtered search results.
The onkeyup="performSearch()" triggers the search function every time the user types in the search box.

Now let’s add some basic CSS to style the search bar and the results.

<style>
    /* Center the search container */
    .search-container {
        text-align: center;
        margin-top: 20px;
    }

    /* Style the search input */
    input[type=text] {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 300px;
    }

    /* Style the results container */
    .results {
        margin-top: 20px;
        text-align: left;
        font-size: 18px;
        max-width: 600px;
        margin: auto;
    }

    /* Style each result item */
    .result-item {
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }
</style>

Explanation:

We’ve styled the search input field to make it bigger and more user-friendly.
The results section is given a clean look, where each search result is styled to appear separately and neatly.

Step 3: Add JavaScript to Handle Search Functionality

We will now write JavaScript to handle the search functionality. This script will filter through the sample data based on what the user types.

<script>
    // Sample data that users can search through
    const sampleData = [
        "Apple",
        "Banana",
        "Cherry",
        "Date",
        "Elderberry",
        "Fig",
        "Grapes",
        "Honeydew Melon",
        "Indian Fig",
        "Jackfruit",
        "Kiwi",
        "Lemon",
        "Mango",
        "Nectarine",
        "Orange",
        "Papaya",
        "Quince",
        "Raspberry",
        "Strawberry",
        "Tomato",
        "Ugli Fruit",
        "Vanilla",
        "Watermelon",
        "Xigua",
        "Yellow Passion Fruit",
        "Zucchini"
    ];

    // Function to perform the search
    function performSearch() {
        const searchInput = document.getElementById('search-input').value.toLowerCase();
        const searchResults = document.getElementById('search-results');
        searchResults.innerHTML = ''; // Clear previous results

        // Filter the data based on the search input
        const filteredData = sampleData.filter(item => item.toLowerCase().includes(searchInput));

        // Display the results
        filteredData.forEach(item => {
            const resultItem = document.createElement('div');
            resultItem.classList.add('result-item');
            resultItem.textContent = item;
            searchResults.appendChild(resultItem);
        });

        // If no results found, show a message
        if (filteredData.length === 0 && searchInput !== '') {
            searchResults.innerHTML = '<p>No results found</p>';
        }
    }
</script>

Explanation:

We’ve created a list of sample data (sampleData) for the user to search through.
The performSearch() function captures the user’s input and filters the sampleData array.
Matching results are displayed in the search-results container, while a message is shown if no results are found.

Step 4: Create Sample Data

We’ve already included a sample list of fruit names in the JavaScript. You can modify the sampleData array to include any set of data relevant to your website.

Complete Code

Here’s the complete code to create a fully functional search menu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Functional Search Menu</title>
    <style>
        /* Center the search container */
        .search-container {
            text-align: center;
            margin-top: 20px;
        }

        /* Style the search input */
        input[type=text] {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 300px;
        }

        /* Style the results container */
        .results {
            margin-top: 20px;
            text-align: left;
            font-size: 18px;
            max-width: 600px;
            margin: auto;
        }

        /* Style each result item */
        .result-item {
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>

    <!-- Search bar structure -->
    <div class="search-container">
        <input type="text" id="search-input" placeholder="Search here..." onkeyup="performSearch()">
    </div>

    <!-- Search results container -->
    <div id="search-results" class="results"></div>

    <script>
        // Sample data that users can search through
        const sampleData = [
            "Apple",
            "Banana",
            "Cherry",
            "Date",
            "Elderberry",
            "Fig",
            "Grapes",
            "Honeydew Melon",
            "Indian Fig",
            "Jackfruit",
            "Kiwi",
            "Lemon",
            "Mango",
            "Nectarine",
            "Orange",
            "Papaya",
            "Quince",
            "Raspberry",
            "Strawberry",
            "Tomato",
            "Ugli Fruit",
            "Vanilla",
            "Watermelon",
            "Xigua",
            "Yellow Passion Fruit",
            "Zucchini"
        ];

        // Function to perform the search
        function performSearch() {
            const searchInput = document.getElementById('search-input').value.toLowerCase();
            const searchResults = document.getElementById('search-results');
            searchResults.innerHTML = ''; // Clear previous results

            // Filter the data based on the search input
            const filteredData = sampleData.filter(item => item.toLowerCase().includes(searchInput));

            // Display the results
            filteredData.forEach(item => {
                const resultItem = document.createElement('div');
                resultItem.classList.add('result-item');
                resultItem.textContent = item;
                searchResults.appendChild(resultItem);
            });

            // If no results found, show a message
            if (filteredData.length === 0 && searchInput !== '') {
                searchResults.innerHTML = '<p>No results found</p>';
            }
        }
    </script>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, we created a fully functional search menu using HTML, CSS, and JavaScript. The search menu dynamically filters a list of data as the user types and displays matching results. This approach can be used in many scenarios, such as searching through a list of products, articles, or any other data on a website.

Java Guides

Search This Blog