1

Boas pessoal, eu tenho o seginte codigo

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>
        ';
    } 
}
?>

o que queria saber como fazer é mesmo o que expliquei no titulo desta questão.

Exemplo, tenho a barra de pesquisa em cima e o conteudo em baixo.. inserir a descrição da imagem aqui

Mas conforme vou pesquisando ele vai apenas deixando o que estou a pesquisar, sem eu ter que dar ENTER. E se eu apagasse o que escrevi voltada tudo como de inicio. E se eu pesquisasse algo que nao existisse exibia uma mensagem de erro.. inserir a descrição da imagem aqui

Nao sei se é possivel, ou como fazer, ja vi varios tutoriais mas nao encontrei nenhum de como fazer isto dessa forma que quero.. Alguem me pode ajudar?

MEU 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 {?>

Tipo, quando faço insert no input em branco ele da-me a lista toda do que tenho na tabela da base de dados.. É possivel mal eu carregar a pagina aparecer a minha tabela da base de dados? E pesquisar SEM PRECISAR DE DAR SUBMIT..

1 Resposta 1

2

Voce deve criar um script separado que recebe o que voce digitou e retorna a pesquisa. Então, chame esse script via Ajax. exemplo:

seu_script.php

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

Então, chame a seguinte funcao no método onkeyup do 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);
});

}

No HTML do input:

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

Onde 'resultado' pode ser uma div na qual voce irá apresentar o resultado do processamento.

5
  • onde meto o segundo trecho que meteu?
    – thecreator
    Commented 29/04/2015 às 17:24
  • nao percebi nem o primeiro nem o segundo trecho, pode incorporar com o meu codigo? :s
    – thecreator
    Commented 29/04/2015 às 17:26
  • o php é um arquivo separado, o resto vai onde está o o html do input Commented 29/04/2015 às 17:34
  • Atualizei a pergunta, pode ajudar-me melhor? :ss
    – thecreator
    Commented 29/04/2015 às 18:17
  • Você quer criar uma sugestão basicamente igual a do google ?eu posso ajudar nessa questão
    – Victor
    Commented 12/11/2017 às 14:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .