I have a php/mysql backend and a bootstrap/jQ frontend. And a 4-hour headache.
The form element looks like this:
<input id="location_name" name="location_name" data-provide="typeahead"
autocomplete="off" type="text" placeholder="Location name"
class="input-xlarge" required="yes" value="" />
The jQuery looks like this:
$(document).ready(function(){
$('#location_name').typeahead({
'source': function (query,typeahead) {
var id = $("#area_id option:selected").attr('value');
return $.get(
'/app/event/location_name_typehead.php',
{ 'location_name': encodeURIComponent(query), 'area_id' : id },
function (data) { return data; }
);
},
'items': 4,
'minLength': 2
});
});
And the PHP looks like this:
<?php
header('Content-type: text/json');
$location_name = $_REQUEST['location_name'];
$area_id = $_REQUEST['area_id'];
//print_r($_REQUEST);
// ... PDO setup ...
$locations = $location_recs->fetchAll(PDO::FETCH_ASSOC);
if(count($locations) == 0) {
echo '[]';
} else {
foreach ($locations as $location) {
$names[] = $location['location_name'];
}
echo '[ "'.implode('", "', $names).'" ]';
};
?>
I've tried both 'application/json' and 'text/json' as the return type, and using typeahead.process(data)
and variations of jQuery json decoding of the data to get the damn thing to work. The search results are being returned, i.e. typing in the field triggers the ajax call, and the document returned looks correct:
[ "Administration Block", "Science Block" ]
Can anyone point out the clearly obvious (I assume) syntax issue that's stopping it?