Replace content according to search without having to give

Question

Good people, I have the code word

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 really what I explained in the title of this question.

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

But as I’m researching, he’s just leaving what I’m researching behind ENTER. What if I erased what I wrote to everything as from the beginning. And if I searched something that didn’t exist I displayed an error message..

I do not know if it is possible, or how to do it, I have seen several tutorials but I have not found any way to do it that way. Someone can 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 {?>

Like, when I do Insert on input blank he gives me the whole list of what I have in the database table.. Is it possible once I load the page to appear in my database table? AND SEARCH WITHOUT HAVING TO SUBMIT..

Answer 1

You must create a separate script that receives what you have typed and returns the query. So call this script via Ajax. example:

seu_script.php

<?php $dados= $_POST['dados'];
//faça o processamento
//retorne o html
echo $html;
//?>

Then, call the following function in the onkeyup method of input:

function getResultado(){
var dados  = document.getElementById("dados").value;
// instancia o ajax via post 
$.post("seu_script.php",
// envia os dados
{dados: dados},
// recupera as informacoes vindas do script
function(data){
    //insere o conteudo vindo do seu_script.php na div
    $("#resultado").html(data);
});

}

In the input HTML:

<input id="dados" onkeyup="getResultado()">

Where 'result' can be a div in which Voce will display the processing result.