crud/templates/crud/search.html

<!DOCTYPE html>
<!-- Preparing search using asynchronous "fetch" (no page reload, no wait)
inspiration from https://www.youtube.com/watch?v=QKcVjdLEX_s
-->
{% extends "layouts/layoutcrud.html" %}

{% block meta %}
    <title>SQL search</title>
{% endblock %}

{% block content %}
    <div style="font-family: monospace" class="container py-4 bg-primary">
        <!-- heading -->
        <header class="pb-3 mb-4 border-bottom">
            <a href="#" class="d-flex align-items-center text-light text-decoration-none">
                <span class="fs-4">User Database Search</span>
            </a>
        </header>
        <!-- search box -->
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="mb-3">
                        <div class="form-group">
                            <label for="term"></label><input type="text" class="form-control" id="term" placeholder="enter search term">
                            <label></label> <!-- used for spacer -->
                        </div>
                        <button class="btn btn-primary bg-secondary" id="myBtn" onclick="search_data();">Search</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- result of search -->
    <div  style="font-family: monospace" class="container">
        <br><br>
        <div class="row"  id="result">
        </div>
    </div>

    <script>
        function search_data() {
            // fetch standard requires data set to a name-value pair
            const term = document.getElementById("term");
            const body = {
                term: term.value
            };

            // fetch call with header options
            fetch('/search/term/', {
                method: "POST",
                credentials: "include",
                body: JSON.stringify(body),
                cache: "no-cache",
                headers: new Headers({
                    "content-type": "application/json"
                })
            })

                // async then replies with response header
                .then(function (response) {
                    // prepare HTML search result container for new output
                    const resultContainer = document.getElementById("result");
                    // clean up from previous search
                    while (resultContainer.firstChild) {
                        resultContainer.removeChild(resultContainer.firstChild);
                    }
                    // trap error response from Web API
                    if (response.status !== 200) {
                        const errorMsg = 'Database response error: ' + response.status;
                        console.log(errorMsg);
                        const div = document.createElement("div");
                        div.innerHTML = errorMsg;
                        resultContainer.appendChild(div);
                        return;
                    }
                    // response contains valid result
                    response.json().then(function(data) {
                        // loop through JSON and build HTML output
                        for (let i = 0; i < data.length; i++) {
                            const div = document.createElement("div");
                            div.innerHTML = data[i].name + ' ' + data[i].email;
                            resultContainer.appendChild(div);
                        }
                    })
                })
        }

        // Get the input field
        const input = document.getElementById("term");

        // Execute a function when the user releases a key on the keyboard
        input.addEventListener("keyup", function(event) {
            // Number 13 is the "Enter" key on the keyboard
            if (event.keyCode === 13) {
                // Cancel the default action, if needed
                event.preventDefault();
                // Trigger the button element with a click
                document.getElementById("myBtn").click();
            }
        });
    </script>
{% endblock %}