AJAX Live Search,根据输入下拉搜索结果

I am trying to implement a AJAX live search however am having a problem linking the pages, I have spent a good 2 hours playing around and haven't come up with a solution.

I have a index.php page which has the page structure and simple form :

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    
    </head>
    <body> 

<input id='search' type="text">
<div id='result'></div>    
<script>

$("#search").on("input", function() {

    $search = $("#search").val();
    if ($search.length > 0) {
        $.get("res.php", {"search":$search}, function($data){
            $("#results").html($data);
        })
    }    
});

</script>    
    </body>
</html>

Here is my res.php page :

<?php     
    print_r($_GET);    
?>

As far as I am aware this should be outputting the input of the search field just below it. Something I am not seeing, I am pretty sure there is no errors in the code.