实时搜索框 - JQuery Ajax

Question

大家好我想问一下，如何通过我自己的代码制作一个实时搜索框？简而言之，这是我的代码：

我的数据库连接，名为dbconn.php

<?php

class Database
{

function __construct()
{
    $this -> connect();
}

function connect(){
    $host = "localhost";
    $name = "root";
    $pass = "";
    $dbname = "dbname";

    $db = new mysqli($host,$name,$pass,$dbname);
    if(mysqli_connect_error()){
        die('Connection Error!');
    }
}

function query($sql){
    $host = "localhost";
    $name = "root";
    $pass = "";
    $dbname = "dbname";

    $db = new mysqli($host,$name,$pass,$dbname);
    if(mysqli_connect_error()){
        die('Connection Error!');
    }

    return $query = $db -> query($sql);
}

}

?>

这是我的model.php

<?php

class Model
{

public function Model($db){
    $this -> connect = $db ;
}

public function View(){

    $data = $this -> data;

    $sql = "SELECT * FROM users WHERE fname LIKE '%' + '$data' + '%' " or die(mysqli_error());
    $query = $this -> connect -> query($sql);

    if($query){
        return $query;
    }
    else{
        return false;
    }

}



}

?>

最后，这是我的index.php

<?php 

require 'dbconn.php';
require 'model.php';

$db = new Database();
$conn = new Model($db);

$test = $conn -> View();

?>

<div class="container">
    <div class="row">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    test
                </div>
                <div class="modal-body">
                    <label>Search</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                        </div>
                        <input type="text" name="" class="form-control" id="search_box">                            
                    </div>                                              
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="search_result">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Gender</th>
                    </thead>
                    <tbody>
                        <?php while($view = mysqli_fetch_assoc($test)) { ?>
                        <tr>
                            <td><?php echo $view['fname']; ?></td>
                            <td><?php echo $view['lname']; ?></td>
                            <td><?php echo $view['gender']; ?></td>
                        </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function(){

        $("#search_box").keyup(function(){

            var name = $("#search_box").val();

            $.ajax({
                type: 'POST',
                url: 'app/model.php' ,
                data: {
                    search : name   
                },
                success: function(data){
                    console.log(data)
                }
            });
        });
    });
</script>

我的问题是，如何从index.php向model.php发送数据仍然是Jquery / Ajax的初学者