TypeaHead Не работает на получении данных из базы данных

Я работаю над jquery typeahead

 $('#country_v1-query<?= $i  ?>').typeahead({
order: "desc",
source: {
data: [
"Afghanistan", "Albania", "Algeria", "Afdorra"]
},
callback: {
onInit: function(node) {
console.log('Typeahead Initiated on ' + node.selector);
}
}
});

Я хочу передать данные, поступающие с PHP, как

for ($i = 1; $i <= 10; $i++) {
$ar = array('apple', 'orange', 'banana', 'strawberry');
echo json_encode($ar);

я хочу показать эти данные (json_encode ($ ar)) в виде typeahead, как

data:[<?php echo json_encode($ar);?>]

но когда я включаю заголовок json, он отображает страницу как json и перестает загружать HTML и CSS
Заранее спасибо