phpjqueryjson

remove empty spaces between jquery autocomplete result list


I have a jquery autocomplete that works except that it if its data source is a json then it adds an empty space between the auto suggested list. as shown below. please help remove the extra spaces. I use jquery.ui/1.11.4/themes/black-tie/jquery-ui.css, jquery-2.1.4.js and jquery.ui/1.11.4/jquery-ui.min.js all from ajax.aspnetcdn.com CDN Thanks.Image of auto suggested list output from json

the codes I am using are

$term=$_GET["term"];
 $getIt ='%'.$term.'%';
 $sql = "SELECT first_name, last_name, tel_no, location  FROM drivers WHERE  first_name like ? ORDER BY first_name limit 10";

 if($getDriv = $con->prepare($sql)){ 
        $getDriv-> bind_param('s', $getIt);
        $getDriv-> execute();
        $getDriv-> bind_result($fName, $lName, $telNo, $loc);
   }
$json=array();  
 while($getDriv ->fetch()){
         $json[]=array($driv['value']=  $fName,
            $driv['label']= $fName,
                    $driv['lName']= $lName,
            $driv['tel']= $telNo,
            $driv['loc']= $locs
             );    
        array_push($json, $driv);
    }
  echo json_encode($json);

and jquery

 $(document).ready(function() {
   $("#firstName").autocomplete({
     delay: 0,
     source: 'auto_driver.php',
     minLength: 1,
     select: function(event, ui) {
       $("#firstName").val(ui.item.value);
       $("#lastName").val(ui.item.lName);
       $("#telNo").val(ui.item.tel);
       $("#location").val(ui.item.loc);
     }
   });
 });


Solution

  • Changing this

    $json[]=array($driv['value']=  $fName,
            $driv['label']= $fName,
             $driv['lName']= $lName,
            $driv['tel']= $telNo,
            $driv['loc']= $locs
             );    
        array_push($json, $driv);
    

    to this solved my problem

     $json[]=array(
                'value'=>  $fName,
                'label'=> $fName,
                'lName'=> $lName,
                'tel' => $telNo,
                'loc'=> $locs
             );