Проблемы с twitter bootstrap 2.3.2 typeahead не работает

Question

У меня есть брандмауэр php/mysql и внешний интерфейс bootstrap/jQ. И 4-часовая головная боль.

Форма элемента выглядит следующим образом:

<input id="location_name" name="location_name" data-provide="typeahead" 
    autocomplete="off" type="text" placeholder="Location name" 
    class="input-xlarge" required="yes" value="" /> 

JQuery выглядит следующим образом:

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

И PHP выглядит следующим образом:

<?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).'" ]'; 
}; 
?> 

Я пытался как 'application/json' и 'text/json' в качестве возвращаемого типа и используя typeahead.process(data) и варианты jQuery j сын расшифровывает данные, чтобы получить эту чертову вещь для работы. Результаты поиска возвращаются, то набрав в поле инициирует вызов Ajax, а документ возвращается выглядит правильно:

[ "Administration Block", "Science Block" ] 

Можно ли указать на явно очевидный (я предполагаю) синтаксический вопрос, что мешает его?

Answer 1

Вы ничего не можете вернуть от вызова AJAX. Они асинхронны, вам нужно сделать что-либо, связанное с данными в обратном вызове.

Кроме того, typeahead хочет, чтобы функция source возвращала массив или вызывала функцию, переданную как второй параметр. В вашем случае вы ничего не можете вернуть, так как это асинхронно, поэтому вам нужно использовать второй параметр.

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