Requirements and Features

  1. Features:

    • A user-friendly autocomplete search bar for dynamic data fetching.

    • Includes:

      • A "Clear" button for resetting the search field quickly.

      • A no-result message if no matching data is found.

      • Seamless navigation to URLs when a result is selected.

Implementation Code

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Autocomplete Search</title>
    <link rel="stylesheet" href="/static/assets/css/jquery-ui-1.13.1.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css">
    <style>
        .clear-button {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="container">
    <div>
        <div class="input-group mt-4">
             <input class="form-control form-control-lg border-primary" type="search" id="inputKeyword"
                 placeholder="input keyword" aria-label="Search">
             <button class="btn btn-primary btn-lg m-0" id="btnSearch">
                 <span class="d-none d-md-block">Search</span>
                 <i class="d-block d-md-none fas fa-search"></i>
             </button>
        </div>
    </div>
</div>

<script src="/static/assets/js/jquery-3.6.0.min.js"></script>
<script src="/static/assets/js/jquery-ui-1.13.1.min.js"></script>
<script>
    $(document).ready(function () {
        // Initialize Autocomplete
        $("#inputKeyword").autocomplete({
            source: function (request, response) {
                const keyword = request.term.trim();
                if (keyword.length === 0) {
                    response([]);
                    return;
                }
                // Fetch data asynchronously
                $.ajax({
                    url: "/racer/search", // Replace with the actual search endpoint
                    method: "POST",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify({ "keyword": keyword }),
                    success: function (res) {
                        if (res.code === 200 && res.data.length > 0) {
                            const data = res.data.map(item => ({
                                label: item.name,
                                value: item.link,
                            }));
                            response(data);
                        } else {
                            response([{ label: "No results found", value: "0" }]);
                        }
                    },
                    error: function () {
                        response([{ label: "Error fetching results", value: "0" }]);
                    }
                });
            },
            select: function (event, ui) {
                if (ui.item.value && ui.item.value != '0') {
                    $('#inputKeyword').val(ui.item.label); 
                    var linkUrl = ui.item.value;
                    window.location.href = linkUrl;
                }
                return false;
            }
        });
    });
</script>
</body>
</html>

For any issues or customization needs, feel free to reach out to us at 📧 tentech.ai.2023@gmail.com.