twitter bootstrap 2.3.2 typeahead 无法正常工作的问题答案

【问题标题】：Issues with twitter bootstrap 2.3.2 typeahead not workingtwitter bootstrap 2.3.2 typeahead 无法正常工作的问题
【发布时间】：2013-08-22 16:34:20
【问题描述】：

我有一个 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 解码数据的变体来让该死的东西正常工作。正在返回搜索结果，即在字段中键入会触发 ajax 调用，并且返回的文档看起来是正确的：

[ "Administration Block", "Science Block" ]

谁能指出阻止它的明显（我认为）语法问题？

【问题讨论】：

您在输入属性中错过了data-provide="typeahead"。那是一回事。我看看能不能找到更多。
:-) 是的，我已经进进出出几次了。我把它放回去了，并在顶部修改了代码 - 但仍然没有乐趣。
忠告，不要构建自己的 JSON！使用 PHP 的json_encode。很简单：echo json_encode($names);.

标签： php ajax twitter-bootstrap bootstrap-typeahead twitter-bootstrap-2

【解决方案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);
    });
},

【讨论】：

嘿嘿。做得好。（我现在正式太老了，不能熬夜......）
很高兴我能帮上忙！ :-D