Bootstrap Typeahead Ajax PHP

I can't figure out what is wrong in the below code. it's not showing me the dropdown if I type any alphabet. I would be really thankful if someone can throw some light on this.

         $('#clientname').typeahead({
         source: function (query, process) {
           $.ajax({
           url: 'data.php',
          type: 'POST',
          dataType: 'JSON',
          data: 'clientname=' + query,
          success: function(data) {     
            console.log(data);
            process(data);

          }
         });
       }
      });

Data.php

  $clientname=$_POST["clientname"];
   $res=$db->result("SELECT * FROM clients WHERE client_name LIKE  '%".$clientname."%'");

if($res)
{
foreach($res as $data){
    $return =  json_encode ($data);
}}
$json = json_encode($return);

Aren't you double-encoding the array?

Should be:

$return = array();
if($res) {
  foreach($res as $data){
    $return[] =  $data;
  }
}
echo json_encode($return);

Also, beware of your passing the $_POST parameter directly in the query.