Jquery Array - AJAX PHP Autocomplete input - php

Question

I am trying to create an autocomplete input using AJAX / PHP but the array returned from PHP seems to be breaking it.
The idea is to have the flavour name and flavour company name show in a dropdown / expanded div that the user can select.
The Array as it is returned to AJAX success (data):
The Array as JSON:
I want to get the flavour_name value and the flavour_company_name value to put in the box as a string, then on selection grab them both as an array consisting of - flavour_name / flavour_company_name to put into a DB later.
I've tried using JSON.stringify, creating a var obj I have got it to return 1 value but not a list like I want.
All help appreciated, thanks in advance.
My AJAX
$("#flavour-name-input").keyup(function(){
var token = '<?php echo json_encode($token); ?>';
var search = $(this).val();
$.ajax({
type: "POST",
url: "controllers/recipeControl.php",
data: { token: token, search: search },
beforeSend: function(){
$("#search-box").css("background","#FFF no-repeat 165px");
},
success: function(data){
//var obj = JSON.parse(data);
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
//$("#suggesstion-box").html(obj['flavour_name']);
$("#search-box").css("background","#FFF");
}
});
});
My PHP Controller
if(isset($_POST['search'])) {
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && isset($_POST['token'])
&& json_decode($_POST['token']) === $_SESSION['token']){
$search = $_POST['search'];
echo json_encode($flavours->getAllFlavoursSearch($search));
}
}
My PHP Function
/**
GET ALL FLAVOURS FOR SEARCH
*/
public function getAllFlavoursSearch($search) {
$query = 'SELECT flavour_name, flavour_company_name FROM flavours WHERE flavour_name LIKE :search ORDER BY flavour_name ASC LIMIT 0,100';
$stmt = $this->queryIt($query);
$stmt = $this->bind(':search', '%'.$search.'%', PDO::PARAM_STR);
return $this->resultset();
}

Answer 1

I think that you have to achieve this in your controller. Now you are returning the json and this is treated like a string. I would create an array in the controller and then you loop it and create the html.
<?php
if(isset($_POST['search'])) {
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && isset($_POST['token'])
&& json_decode($_POST['token']) === $_SESSION['token']){
$search = $_POST['search'];
$html = '<ul>';
$content = $flavours->getAllFlavoursSearch($search);
foreach ($content as $con) {
$html .= '<li>'.$con['flavour_name'].'-'.$con['flavour_company'].'</li>';
}
$html .= '</ul>';
echo $html;
}
}
?>
I have not tested it but is something like this, maybe you have to check that the query returns an array.
Regards.