live search php

[pilucho]

Hola Grupo del foro

Este código funciona, despliega una lista en una <tabla> "fetch.php" al escribir en el campo de búsqueda
posteriormente en esa lista se hace clic, y muestra el resultado seleccionado en los inputs.

La, idea es que en el campo de texto, al realizar la búsqueda por nombres... me de el resultado
como un "live search" mostrando el contenido en el campo de texto. y no como una <tabla> fuera del campo de búsqueda.
de este modo al hacer clic al nombre muestre en los campos de inputs.

espero me puedan colaborar con la ayuda. si existe otro método o código estoy dispuesto aprender de ello. gracias.





fetch.php

Código PHP:

<?php
include('config.php'); 
$mydb = new db(); 
$conn = $mydb->connect();
 
if(isset($_POST["query"]))
{
 
$q = $_POST["query"];
    
$results = $conn->prepare("SELECT * FROM customer WHERE customerFN LIKE '%" . $q . "%'
OR customerID LIKE '%".$q."%'
OR customerLN LIKE '%".$q."%'
OR customerAddress LIKE '%".$q."%'
OR customerAge LIKE '%".$q."%'
");
 
}
else
{
 
 $results = $conn->prepare("SELECT * FROM customer ");
 
}
 
$results->execute();
while($row = $results->fetch(PDO::FETCH_ASSOC))
{
     echo '<tr onclick="javascript:showRow(this);">' . 
    '<td>' . $row['customerID'] . '</td>' . 
    '<td>' . $row['customerFN'] . '</td>' . 
    '<td>' . $row['customerLN'] . '</td>' .
    '<td>' . $row['customerAge'] . '</td>' .
    '</tr>';
}
?>
 

Código Javascript:

<script type="text/javascript">
$(document).ready(function(){
 
 load_data();
 
 function load_data(query)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('#result').html(data);
   }
  });
 }
 
 $('#search_text').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
});
 
function showRow(row)
{
    var x=row.cells;
    document.getElementById("custID").value = x[0].innerHTML;
    document.getElementById("fname").value = x[1].innerHTML;
    document.getElementById("lname").value = x[2].innerHTML;
}
</script>
 

Código HTML:

<script src="js/jquery-1.11.3-jquery.min.js"></script> 
 
<!-- BUSQUEDA Y DESPLIEGA EL RESULTADO EN UNA LISTA  -->
<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Search</span>
        <input type="text" name="search_text" id="search_text" placeholder="Search ..." class="form-control" />
    </div>
</div>
<!-- EL RESULTADO ES ASÍ  -->
|| ID   ||   FIRSTNAME    ||     LASTNAME     |||
|| 1    ||     Lily       ||    James         |||
|| 2    ||     Pablo      ||    Marmol        |||
|| 3    ||     Pedro      ||   Pica Piedra    |||
 
 
 
<!-- LA IDEA ES QUE SE VEA EN EL MISMO CUADRO DE TEXTO COMO UN LIVE SEARCH  -->
En el campo de texto Busco a: Pablo 
Resultado: Lista de palabras con 'P'
---------------------
|   Pablo Marmol    | <!-- CLIC AL NOMBRE PARA MOSTRAR EN LOS INPUT'S -->
 
 
<!-- AQUI EL RESULTADO AL HACER CLIC AL NOMBRE -->
<form class="form-horizontal" method="post">
    <div class="form-group">
        <label class="control-label col-sm-3">ID:</label>
            <div class="col-sm-9">
                  <input type="text" class="form-control" id="custID" required placeholder="Customer ID" name="custID">
            </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3">First Name:</label>
            <div class="col-sm-9">
                  <input type="text" class="form-control" id="fname" required placeholder="First Name" name="fname" >
            </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3">Last Name:</label>
            <div class="col-sm-9"> 
                  <input type="text" class="form-control" id="lname" required placeholder="Last Name" name="lname">
            </div>
    </div>
</form>