0

I have a page where I want to load the search results when user inputs keywords in the input field. I've a search button when clicked on search button an search-body div appears In the search-body there's an Input field and user inputs the keywords to search and now after the user inputs the keywords I want to display the search results through extracting the keywords and Perform an xhr request to this url "https://bingewatch.to/ajax/movie/search?keyword=" and in the place of the keyword={input-keywordoftheinputfield} and through xhr request the contents should be loaded inside <div id="block-result"></div> also after making the request the content of "https://bingewatch.to/ajax/movie/search?keyword=" this page should be loaded without including the header and body, like this is

<body> 
rest content
</body>

and after body there's rest of its content like other div section etc all the contents should be loaded all things but just without including the body header and html. Here's the Code

<!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>Search</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/scss/utilities/_flex.scss">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/scss/utilities/_text.scss">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/scss/_spinners.scss"> -->
    <link rel="stylesheet" href="https://bingewatch.to/css/group_1/theme_4/styles.min.css?v=0.6">
</head>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


*{
    margin: 0;
    padding: 0;
    font-family: 'Neucha', cursive;
}
html,body {
    background: rgb(248, 246, 246);
}
.srch{
    display: flex;
    justify-content: center;
    margin: 16px;
}
#sch{
    font-size: 22px;
    border-radius: 15px;
    width: 5em;
    font-weight: bold;
    color: black;
    background-color: rgb(121, 106, 95);
}
</style>

<body>
    <div class="srch">
        <button id="sch">Search</button>
    </div>

    <div id="search-body" style="display: none;">
        <div class="close-overlay" title="Close" id="close-button"><i class="fas fa-times"></i></div>
        <div class="search-body-wrap xscroll">
            <div class="b-container">
                <div id="block-input">
                    <form class="search-content" id="search-form" action="/search">
                        <input autofocus="" autocomplete="off" name="keyword" required="" type="text" class="form-control search-input s-keyword" id="inpt" placeholder="Enter keywords...">
                        <div class="is-icon"><i class="fas fa-search"></i></div>
                    </form>
                </div>
                <div class="loading-wrap text-center p-5" id="search-loading" style="display: none;">
                    <div class="d-flex justify-content-center">
                        <div class="spinner-border" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                </div>
                <div id="block-result"></div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let searchBody = document.getElementById("search-body");
            let closeButton = document.getElementById("close-button");
            let searchButton = document.getElementById("sch");

            searchButton.addEventListener("click", function () {
                searchBody.style.backgroundColor = "black";
                searchBody.style.display = "block";

            });
    
            closeButton.addEventListener("click", function () {
                searchBody.style.display = "none";
            });
        });
        
    </script>
    <script>
        let inputField = document.getElementById('inpt');
        let searchLoading = document.getElementById('search-loading');

       function checkInputValue() {
        // Check if the input field is not empty
        if (inputField.value.trim() !== '') {
            // Display the search loading element
            searchLoading.style.display = 'block';
        } else {
            searchLoading.style.display = 'none';
        }
        }

        // Check input value when the page loads and on every input change
        document.addEventListener('DOMContentLoaded', checkInputValue);
        inputField.addEventListener('input', checkInputValue);
    
    </script>

</body>
</html>

I searched for it alot but couldn't find exact solution for this and I am not that familiar with xhr request thing and js although I can manage a bit to survive with js only a bit. So, anyone with the help would be very appreciated and Thank You.

Hardcore Gaming
  • 1
  • 2

0 Answers0