Return database records using jquery ajax, php and mysql

Question

I am beginner in jquery and would like a help to the following situation:

In this field:

<input type="text" name="colaborador" id="colaborador">

How would you do where, for each typed letter a query is executed in the database and return the rows of a table?

$(document).ready(function() {
    $("#colaborador").keyup(function(){
       //muitas dúvidas aqui
    });
});

In my arquivo.php should return a JSON??? How would you do this??

Answer 1

Here’s an example I made, I can understand if you look:

JAVASCRIPT:

<script src="https://code.jquery.com/jquery-latest.min.js">/script>
<script type="text/javascript">


  function construirLista(conteudo) {
      var lista='<div class="conteudo">';
      for (var i in conteudo) {
       lista += (conteudo[i].titulo !="" && conteudo[i].titulo!=null) ? '<h3>' + conteudo[i].titulo  + '</h3>' : '';
       lista += (conteudo[i].texto !="" && conteudo[i].texto!=null) ? conteudo[i].texto + "\n" : '';
       lista += '</div>';
      }
      return lista;
  }

  function listarConteudo(termo) {
      var dados = (termo!=null && termo.length > 3) ? {s_busca:termo} : null;
      $('#result_busca').hide();
      //loader antes de carregar
      $('#geral')
         .show()
         .html('<center><br><br><img src="imagens/loader.gif" border="0"></center>');
      $('#result_busca').hide();
      $.post('buscar.php',dados,function(retorna){
        var conteudo = jQuery.parseJSON(retorna);
        (conteudo.length < 1) ? $('#respostaBusca').show() :  $('#respostaBusca').hide();
            $('#geral').html(construirLista(conteudo));
        });
   }

   $(document).ready(function() {
      $('#respostaBusca').hide();
      listarConteudo(null);

      $('#buscaV2 input[type="button"]').on('click',function() {
          if ($('#buscaV2 #palavra').val().length < 3) {
              alert('Digite ao menos 3 caracteres para fazer a busca!');
             $('#buscaV2 #palavra').focus();
             return false;
          }
      });
      $('input[name="palavra"]').bind('input',function(){
          var busca = $(this).val();
          if (busca.length > 3){
              $('input[name="palavra"]').each(function(){
                  listarConteudo(retiraAcentos(busca));
              });
          } else if( busca.length == 0){
              listarConteudo(null);
          }
        });

        $('#botao_busca').click(function(){
            $('#respostaBusca,#result_busca').hide();
            $("input[name=glossario]").each(function() {
                var busca = $(this).val();
                if (busca.length >= 1) {
                    $('#geral').hide();
                    $('#result_busca').show();
                    $.post('buscar.php',{s_busca:retiraAcentos(busca)},function(retorna){
                    var conteudo = jQuery.parseJSON(retorna);
                        (conteudo.length < 1) ?  $('#respostaBusca').show() :  $('#respostaBusca').hide();
                        $('#result_busca').html(construirLista(conteudo));
                    });
                } else {
                    $('#respostaBusca').show();
                    listarConteudo(null);
                }
            });

        });
    });

    function retiraAcentos(palavra) {
        var com_acento = 'áàãâäéèêëíìîïóòõôöúùûüçÁÀÃÂÄÉÈÊËÍÌÎÏÓÒÕÖÔÚÙÛÜÇ';
        var sem_acento = 'aaaaaeeeeiiiiooooouuuucAAAAAEEEEIIIIOOOOOUUUUC';
        var nova='';
        for(var i=0; i<palavra.length; i++) {
            if (com_acento.search(palavra.substr(i,1))>=0) {
                nova+=sem_acento.substr(com_acento.search(palavra.substr(i,1)),1);
            } else {
                nova+=palavra.substr(i,1);
            }
        }
        return nova;
    }

HTML:

    <div id="formBusca">
     <form name="buscaV2" action="listar.php" method="post" id="buscaV2">
       <label>Pesquisar: </label><input type="text" name="palavra" id="palavra" placeholder="Digite a palavra" />&nbsp;<input type="button" value="OK" />
      </form>
    </div>
    <!-- aqui o conteúdo -->
     <div id="respostaBusca" style="display:none">
                <p><br><br>Este Termo não foi localizado.</p>
            </div>
            <div id="boxPagina" style="width:100%;float:left" class="caixinha">
                <span id="result_busca"></span>
                <span id="geral">
                    <!-- aqui carrega o HTML -->
                </span>

            </div>

PHP:

 <?php
     function buscarDados($post = null, $db) {
        $dados = array();
        if (isset($post['s_busca']) && $post['s_busca']!="") {
            $busca = trim($post['s_busca']);
            $sql = $db->prepare("Select * from  TABELA WHERE titulo LIKE ? OR texto LIKE ?");
            $data = $sql->execute(array('%".$busca."%','%".$busca."%'));
            } else {
                $query = $db->prepare("Select * from  TABELA WHERE 1");
                $query->execute();
                $results = $query->fetch();
            } 
                 $data = array();
                 if (count($results))
                 foreach ($results as $k => $val) {
                     $data[] = array('titulo'=>utf8_encode($val['titulo']),'texto'=>utf8_encode($val['texto'])); 
                 }
                echo json_encode($data);
            }
        }

   if ($_POST) {
        buscarDados($_POST, $db);
   } else {
        buscarDados(null, $db);
   }
    ?>