


This API functions by grabbing data created with JSON in an array and displaying it to the user based on a search term they have provided. Ensure that the appropriate jQuery cdn links are implemented before starting:


    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


 The next priority is implementing a script to grab the JSON data similar to this:



<?php
$mysqli = new mysqli('localhost', 'root', '', 'mediadb');
if ($mysqli->connect_errno != 0) {
    header('Location: error.php');
    exit();
}
$sql = "SELECT * FROM anime"; // can be changed depending on need
$results = $mysqli->query($sql);
$anime = []; // can be changed depending on need
while ($row = $results->fetch_assoc()){
    $anime[] = $row; // can be changed depending on need
}
header('Content-Type: application/json; charset=utf-8');
$animedata = json_encode($anime, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
echo $animedata; // can be changed depending on need
?>


The table can be altered by replacing the "anime" table in the select statement to either the tvshows or games table name, as well as altering the array and data echoed names.

This will return the $animedata array which will format the data entered in JSON_PRETTY_PRINT format. Example Data:

    {
        "animeid": "11",
        "title": "Attack on Titan",
        "description": "After his hometown is destroyed and his mother is killed, young Eren Jaeger vows to cleanse the earth of the giant humanoid Titans that have brought humanity to the brink of extinction.",
        "releaseyear": "2013",
        "genre": "Action, Dark Fantasy, Drama",
        "episodecount": "89",
        "studio": "Wit Studio, MAPPA",
        "filename": null,
        "created_at": "2025-04-15 00:01:37",
        "updated_at": "2025-04-15 00:01:37"
    },


To then filter and display the data to the user, a search bar should be implemented for the user to enter data into.
Example search bar:

        <div class="content mt-3">
            <div class="d-flex align-items-center">
                <form id="AnimeForm" class="flex-grow-1">
                    <div class="search-box search-header bg-theme card-style me-3 ms-3 d-flex align-items-center">
                        <input type="text" name="search" class="border-0 flex-grow-1" placeholder="Search anime by title">
                        <button type="submit" style="width:100px;" class="btn btn-secondary bg-highlight text-white ms-2">Search</button>
                    </div>
                </form>
            </div>
        </div>




You also require a div to hold the data with a relevant ID to identify it, such as this:

<div id="anime-content"></div>


An example implementation of the API, using the search result to append data.

    $(document).ready(function () {
            // function performed when the search bar is pressed
            $('#AnimeForm').on('submit', function (e) {
                // stop form submitting normally so that ajax data can be loaded
                e.preventDefault();

                // ensure that the input search matches the html form name
                let SearchTerm = $('input[name="search"]').val().toLowerCase();

                // important to remove data that was previously in the field to ensure the transition is seamless without excess data

                $('#anime-content').html('<p>Loading Anime Data...</p>');

                // grab data ajax
                $.ajax({
                    url: 'animedata.php', // enter the php file that you are grabbing the JSON data from
                    method: 'GET',
                    dataType: 'json',
                    // if the data you have entered is found, it will perform the script
                    success: function (data) {
                        // ensure that the search term is being set to lower case to stop being case sensitive (can be left in if you desire a perfect match)
                        let SearchResult = data.filter(anime => anime.title.toLowerCase().includes(SearchTerm));

                        // get rid of the content that was in the div previously (to reuse without a refresh)
                        $('#anime-content').empty();

                        // ensure data exists
                        if (SearchResult.length > 0) {
                            SearchResult.forEach(function (anime) {
				$('anime-content').append('
					##Data you want to display in HTML format##
				');
				});
			 } else {
                            // since no results were found display this message
                            $('#anime-content').html('<p>No matching anime found.</p>');
                        }
                    },
                    error: function () {
                        // give user error if data is not found
                        $('#anime-content').html('<p>Error fetching anime data. Please try again later.</p>');
                    }
                });
            });
        });
        </script>


Example data that can be appended to the anime-content div:
<p><strong>Description:</strong> ${anime.description}</p>



