live search via ajax

<!doctype html>
<html lang="en">

<head>
    <title>Live Search</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
        img {
            border-width: 0
        }

        * {
            font-family: 'Lucida Grande', sans-serif;
        }
    </style>
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <div class="row">
        <div class="container">
            <div class="form-group">
                <input type="text" class="form-control pull-right" style="width:20%" id="search" placeholder="Type to search table...">
            </div>
            <br>
            <table class="table-bordered table pull-right" id="mytable" cellspacing="0" style="width: 100%;">
                <thead>
                    <tr role="row">
                        <th>Id</th>
                        <th>Name</th>
                        <th>Slug</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <?php

    $db = new mysqli("myhost", "dbuser", "mypassword", "mydbname");

    if($db->connect_error) die("Error in database connection - ".$db->connect_error);

    $result = $db->query("SELECT * FROM short_url ORDER BY rating DESC LIMIT 50 ");

    if($result->num_rows>0){

        while($row = $result->fetch_assoc() )
        {
            echo "
            <tr>
                <td>".$row['id']."</td>
                <td>".$row['name']."</td>
                <td><a href='".$row['slug']."'>".$row['slug']."</a></td>
                <td>".$row['rating']."</td>
            </tr>";
        }
    }
    else
    {
        echo "0 results";
    }

  //  $conn->close();

    ?>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        // Write on keyup event of keyword input element
        $(document).ready(function () {
            $("#search").keyup(function () {
                _this = this;
                // Show only matching TR, hide rest of them
                $.each($("#mytable tbody tr"), function () {
                    if ($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
                        $(this).hide();
                    else
                        $(this).show();
                });
            });
        });
    </script>
</body>

</html>