Replace content according to the search without having to submit

Good people, I have the seginte code

require_once 'Connection.simple.php';
$OK = true;
$db->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING );

if (isset($_GET['name'])) {

    $data = $_GET['name'];
    $sql = 'SELECT * FROM channels WHERE Channel LIKE :channel';
    $stmt = $db->prepare($sql);
    $stmt->bindValue(':channel', '%' . $data . '%');
} else {
    $sql = 'SELECT * FROM channels';
    $stmt = $db->prepare($sql);}



$stmt->execute();
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);




// If there are no records.
if(empty($rows)) {
    echo "<tr>";
    echo "<td colspan='4'>There were not records</td>";
    echo "</tr>";
}
else {
    foreach ($rows as $row) {
    echo '
        <tr>
            <td><a href="' . $row['ID'] . '">' . $row['Channel']. '</td>
        </tr>
        ';
    } 
}
?>

What I wanted to know how to do is what I explained in the title of this question.

Example, I have the search bar above and the contents below.

ButasI'mresearching,itjustleaveswhatI'msearchingfor,withouthavingtogiveENTER.AndifIerasewhatIwroteturnedeverythingasthebeginning.AndifIsearchedforsomethingthatdidnotexistitdisplayedanerrormessage..

I do not know if it's possible, or how to do it, I've seen several tutorials but I have not found any how to do it this way I want .. Can anyone help me?

MY HTML

        <form class="form-horizontal" role="form" method="get">
            <div class="form-group">
                <label class="col-sm-2 control-label" for="name">Name</label>
                <div class="input-group col-sm-9">
                    <input id="name" name="name" type="text" class="form-control" placeholder="Type the name" />
                    <span class="input-group-btn">
                            <button type="button" class="btn btn-default btnSearch" >
                                <span class="glyphicon glyphicon-search"> Search</span>
                            </button>
                    </span>
                </div>
            </div>
        </form>
        <div class="col-sm-8">
        <!-- This table is where the data is display. -->
            <table id="resultTable" class="table table-striped table-hover">

                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {


    $('.btnSearch').load(function(){
        makeAjaxRequest();
    });

    $('form').submit(function(e){
        e.preventDefault();
        makeAjaxRequest();
        return false;
    });

    function makeAjaxRequest() {
        $.ajax({
            url: 'php/search.php',
            type: 'get',
            data: {name: $('input#name').val()},
            success: function(response) {
                $('table#resultTable tbody').html(response);
            }
        });
    }
});

PHP

require_once 'Connection.simple.php';     $ OK = true;     $ db-> setAttribute (PDO :: ATTR_ERRMODE, PDO :: ERRMODE_WARNING);

if (isset($_GET['name'])) {

    $data = $_GET['name'];
    $sql = 'SELECT * FROM channels WHERE Channel LIKE :channel';
    $stmt = $db->prepare($sql);
    $stmt->bindValue(':channel', '%' . $data . '%');
} else {
    $sql = 'SELECT * FROM channels';
    $stmt = $db->prepare($sql);}?>



<?
$stmt->execute();
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);?>





<?// If there are no records.
if(empty($rows)) {
    echo "There were not records";
}
elseif (isset($data)){
    foreach ($rows as $row) {
    echo '
        <a href="' . $row['ID'] . '">' . $row['Channel']. '
        ';
    } 
}


else {?>

Type, when I insert in the input blank it gives me the entire list of what I have in the database table .. Is it possible badly for me to load the page to appear in my database table? AND search WITHOUT NEED TO GIVE SUBMIT ..