I have spent a few unproductive hours with the very painful lack of instructions for Bootstrap (2.3.2) typeahead and have given up for the evening and hope some expert can point me in the right direction.

All the small tests I have fed into my base framework are OK so I know the basics are ok, but whenever I try to use my own feeds and variables it all implodes.. no thats not true.. it does NOTHING!

Here is the live feed running on my dev webserver

```
http://54.194.148.89:3000/stations/all

```

and here is the attempt at code

```
<html>
<head>
    <title>Example</title>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript" src="js/lib/bootstrap.min.js"></script>
    <script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">

    <script>

        $('#stations').typeahead([{
            name: 'Search',
            valueKey: 'crs',
            remote: {
                url: 'http://54.194.148.89:3000/stations/all',
                filter: function (parsedResponse) {
                    // parsedResponse is the array returned from your backend
                    console.log(parsedResponse);

                    // do whatever processing you need here
                    return parsedResponse;
                }
            },
            template: [
                '<p class="station_name">{{station_name}} ({{crs}})</p>'
            ].join(''),
            engine: Hogan
        }]);

    </script>

</head>
<body>
<div class="hero-unit">
    <h1>Input Test</h1>

    <input id="stations" autocomplete="off"/>

</div>
</body>
</html>

```

Ultimately I want the name drop down list to have **name (crs)** with a value of the **crs** (I have not even looked into the assigning the value bit yet). Please can anyone put me out of my misery. The end result in future will ideally read the JSON script from the page and assign to a localstorage area for usage, but for now just working will be awesome.

EDIT : Just a clarification, this is open rail data for an open source datapage, and not commercial

**Extra edit : When I put this as the body but leaving everything else the same it works fine, so I know typeahead is working as a function**

```
<body>

    <input id="stations" autocomplete="off"/>

    <script>

        var jsonString = '[{"label":"System Administrator","value":"1"},{"label":"Software Tester","value":"3"},{"label":" Software Developer","value":"4"},{"label":"Senior Developer","value":"5"},{"label":"Cloud Developer","value":"6"},{"label":"Wordpress Designer","value":"7"}]';

        var jsonObj = $.parseJSON(jsonString);
        var sourceArr = [];

        for (var i = 0; i < jsonObj.length; i++) {
            sourceArr.push(jsonObj[i].label);
        }

        $("#stations").typeahead({
            source: sourceArr
        });

    </script>

</body>

```