Search code examples
jqueryjsonhtmltwitter-typeaheadbloodhound

Typeahead blank results - can't figure out why

I am at my wits end. I have asked a similar question before but now I am trying to use Twitters examples exactly (following http://twitter.github.io/typeahead.js/examples/#multiple-datasets but with only one dataset) and can't get anything to work.

I have a data stored JSON file that looks like this (short version)

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

which is in a file called stations.json

and I have the following code which just results in an input field with no typeahead

<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>

I don't get any error, I can view the datums in console.log, I just cant get them to be usable by the typeahead. If I open up google tools, and type console.log(stations) I can see the object list.

Any help appreciated

Thanks

Solution

  • Honestly, cant track down reason why, but eventually I recoded with a whole new set of names and it just worked... go figure. Here is the final code

    <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>

    I just called the latest twitter typeahead bundle and handlebars in the header