Отображение данных из определенного поля базы данных, которое пользователь вводит в строку поиска

Question

У меня есть некоторый код, в котором по назначению пользователь вводит в строку поиска. После поиска должна отображаться таблица с записями, тесно связанными с поисковой фразой. В моем случае у меня есть весь настроенный код, но я не получаю никакой таблицы, показываемой при поиске.

У меня есть много закомментированных строк, и вот некоторые из исправлений и вещей, с которыми я столкнулся, и которые я решил исправить это.

Код функции поиска - search.php

$name = $_POST['name'];
$sql = "SELECT * FROM ProfessorsOrStaff where Name LIKE '%".$name."%'";

//echo $sql;
$data = array();
$result = $conn->query($sql);
//echo json_encode($result);
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo $row['Name'];
        array_push($data, $row);
    }
} else {
    //array_push($data);
    echo "no data";
    exit;
}
//array_push($data, {"msg":'success'});
echo json_encode($data);
$conn->close();
?>

Частичный код файла, который отображает строку поиска и javascript

<div id="message" style="text-align: center">
        <p>There are no results.</p>
    </div>
    <table class="table" id="result_table" hidden="hidden">
        <thead class="thead-dark">
            <th>Name</th>
            <th>Phone Number</th>
        </thead>
        <tbody id="body">
            <tr>
                <!--<td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>-->
            </tr> 
        </tbody>
      </table>
</div>

<script type="text/javascript">
$("#search").click(function(){
    var text = $("#name").val();
    $.post('search.php', {name: text}, function(data){

        console.log(data);
        //$name = $_POST['name'];
        if(data != "no data" ){
            console.log("here");
            var obj = JSON.parse(data);
            //$("#result_table").setAttr('hidden');
            $('#result_table').removeAttr('hidden');
            $("#message").hide();
            var html = '';
            for(var i = 0 ; i < obj.length; i ++ ){
                console.log(obj[i]);
                html += '</td><td>'+obj[i].Name+'</td><td>'+obj[i].PhoneNumber+'</td></tr>';
            }
            $('#body').html(html);
        }
        else{
            $('#result_table').attr("hidden","hidden");
            $("#message").show();
        }
    });
})

Код немного запутан. Чтобы уточнить, search.php можно найти здесь - https://codeshare.io/a3wdmD

Другой файл с javascript- https://codeshare.io/G8838A

Макет таблицы - https://imgur.com/a/14SsvLS

EDIT1- ПослеОбнаружив, что запрос не был сделан, я переключил некоторые вещи и смог заставить его некорректно вызвать файл search.php. Теперь я получаю неправильные результаты от этого. Он выводит меня на новую страницу и отображает содержимое всех моих записей в этой таблице в виде простого текста. Я пытался сделать так, чтобы после нажатия кнопки поиска, таблица результатов появилась прямо под строкой поиска. Ссылки на полный код обновлены, чтобы показать текущее состояние кода.