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);
}
});
});
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
);