Typeahead 空白结果 - 不知道为什么答案

【问题标题】：Typeahead blank results - can't figure out whyTypeahead 空白结果 - 不知道为什么
【发布时间】：2014-07-23 14:23:36
【问题描述】：

我束手无策。我之前问过一个类似的问题，但现在我正在尝试完全使用 Twitter 示例（遵循http://twitter.github.io/typeahead.js/examples/#multiple-datasets，但只有一个数据集）并且无法正常工作。

我有一个存储数据的 JSON 文件，看起来像这样（短版）

[
  {
    "crs_code":"aml",
    "station_name":"Acton Main Line"
  },
  {
    "crs_code":"amt",
    "station_name":"Aldermaston"
  }
]

在一个名为stations.json的文件中

我有以下代码，它只会导致输入字段没有预先输入

<html>
<head>
    <title>CRS Example</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/typeahead.bundle.js"></script>
    <script src="http://twitter.github.io/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css">

</head>
<body>

<div id="dataset">
    <input class="typeahead" type="text" placeholder="Stations">
</div>

</body>

<script type="text/javascript">

    var stations = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('station_name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: 'data/stations.json'
    });

    stations.initialize();

    $('#dataset .typeahead').typeahead({
                highlight: true
            },
            {
                name: 'crs',
                displayKey: 'station_name',
                valueKey: 'crs_code',
                source: stations.ttAdapter(),
                templates: {
                    header: '<h3 class="station-name">Station Lookup</h3>'
                }
            });

</script>
</html>

我没有收到任何错误，我可以在 console.log 中查看数据，我只是无法让它们被预先输入的内容使用。如果我打开谷歌工具，然后输入 console.log(stations) 我可以看到对象列表。

任何帮助表示赞赏

谢谢

【问题讨论】：

这是错字吗？：$('#datasets .typeahead').typeahead 或许应该是：$('#dataset .typeahead').typeahead
好地方，是的，只是我的例子中的一个错字。虽然很好看！仔细检查了我的代码，没有错字。会更正我的帖子。谢谢

标签： jquery json html twitter-typeahead bloodhound

【解决方案1】：

老实说，无法追查原因，但最终我用一组全新的名称重新编码，它就起作用了......去想一想。这是最终代码

<div id="stations">
    <input class="typeahead" type="text" placeholder="Oscar winners for Best Picture">
</div>

</body>

<script type="text/javascript">

    var stationList = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('station_name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: 'data/stations.json'
    });

    stationList.initialize();

    $('#stations .typeahead').typeahead(null, {
        name: 'departure',
        displayKey: 'station_name',
        valueKey: 'crs_code',
        source: stationList.ttAdapter(),
        templates: {
            empty: [
                '<div class="empty-message">',
                'Unable to find any FGW Stations that match the current query',
                '</div>'
            ].join('\n'),
            suggestion: Handlebars.compile('<p><strong>{{station_name}}</strong> ({{crs_code}})</p>')
        }
    });

</script>

我刚刚在标题中调用了最新的 twitter typeahead bundle 和车把

【讨论】：