Issues with twitter bootstrap 2.3.2 typeahead not working

Question

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?

Answer 1

You cannot return anything from an AJAX call. They are asynchronous, you need to do anything related to the data in the callback.

Also, typeahead wants the source function to either return an array or call the function passed as the 2nd parameter. In your case, you cannot return anything since it's asynchronous, so you need to use the 2nd parameter.

'source': function (query,typeahead) {
    var id = $("#area_id option:selected").attr('value');

    $.get('/app/event/location_name_typehead.php', {
        'location_name': encodeURIComponent(query),
        'area_id': id
    }, function(data){
        typeahead(data);
    });
},