src/Demo/index.html from markusos/simple-search

src/Demo/index.html
Summary

Maintainability

Test Coverage

Issues
<!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">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <style>
        .glyphicon-refresh-animate {
            -animation: spin .7s infinite linear;
            -webkit-animation: spin2 .7s infinite linear;
        }

        @-webkit-keyframes spin2 {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            from {
                transform: scale(1) rotate(0deg);
            }
            to {
                transform: scale(1) rotate(360deg);
            }
        }
    </style>
</head>

<body>

<div class="container">

    <form>
        <div class="col-lg-12" style="padding: 100px">
            <div class="input-group">
                <input id="query" type="text" class="form-control" placeholder="Search Query">
            <span class="input-group-btn">
                <button id="search" class="btn btn-default" type="submit">Search</button>
            </span>
            </div>
        </div>
    </form>

    <table id="results" style="margin: 100px">
    </table>

</div>
<!-- /container -->

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function () {
        // Init index if needed!
        $.getJSON("init.php").done(function (data) {
            if (data) {
                console.log('Sample data indexed!');
            }
            else {
                console.log('Index already exists');
            }
        });

        // Bind search button to click event
        $("#search").click(function (event) {
            event.preventDefault();
            search();
        });
    });

    // Handle search button click
    function search() {
        $("#results").html('<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate" aria-hidden="true"></span>');

        $.getJSON("search.php", {
            query: $("#query").val()
        }).done(function (data) {
            $("#results").html("");

            // Build result table
            if (data.length > 0) {
                $.each(data, function (i, result) {
                    $("<tr><td><b>" + result.title + "</b></td></tr>").appendTo("#results");
                    $("<tr><td>" + result.content + "</td></tr>").appendTo("#results");
                    $("<tr><td><i>" + result.score + "<i></td></tr>").appendTo("#results");
                    $("<tr><td>&nbsp</td></tr>").appendTo("#results");
                });
            }
            else {
                $("<tr><td>No results found</td></tr>>").appendTo("#results");
            }
        });
    }
</script>

</body>
</html>