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 json typeahead.process(data)變體來使該死的事情起作用。 返回搜索結果，即在字段中鍵入會觸發ajax調用，並且返回的文檔看起來正確：

[ "Administration Block", "Science Block" ]

誰能指出阻止它的明顯（我認為）語法問題？

Answer 1

您無法通過AJAX調用返回任何內容。 它們是異步的，您需要執行與回調中的數據相關的任何操作。

另外，typeahead希望source函數返回一個數組或調用作為第二個參數傳遞的函數。 在您的情況下，您無法返回任何內容，因為它是異步的，因此需要使用2nd參數。

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