Getting typeahead.js to work with dynamic content, Bottle and Hogan

Question

Expected Behaviour

The search field should display results like the 'Open Source Projects by Twitter' example on:

http://twitter.github.io/typeahead.js/examples/

Current Behaviour

• No drop down is appearing when I enter search text.
• No errors in Firebug.
• All necessary 'container' divs seem to be loaded (but hidden with display:none) beneath the search field.
• Results are not generated or displayed.
• Firebug > Net DOES display GET request for json file when loading content, and the contents are available in the response tab.

Troubleshooting

Dynamic Content

Site content is loaded dynamically via getJSON().

Hogan and typeahead Scripts Are Included In Head

<script src="https://path/to/typeahead.min.js"></script>
<script src="https://path/to/hogan-2.0.0.js"></script>

Bottle and Hogan

I use Bottle which also uses the default placeholder used by Hogan ie {{value here}}.

So in Hogan.js, i changed the default delimeters from:

otag = '{{',
ctag = '}}';

to:

otag = '[[',
ctag = ']]';

Function

I created a function that would run after the dynamic content is loaded:

<script>
function getTypeAheadReady() {
$('.example-twitter-oss .typeahead').typeahead({                              
name: 'mygreatsearch',
valueKey: 'my_field_one',  
prefetch: 'https://path/to/static/courses.json',
template: [
'<p class="my-field-1">[[my_field_one]]</p>',
'<p class="my-field-2">[[my_field_two]]</p>',
'<p class="my-field-3">[[my_field_three]]</p>'
].join(''),
engine: Hogan  
})
}
</script>

Call

$("#content").html("");
$("#content").append(results.content);
getTypeAheadReady(); // re-initialise typeahead.js functionality for search

JSON

My JSON file seems to be correct:

[
{ "my_field_one": "val1", "my_field_two": "val2", "my_field_three": "val3". "tokens":["something"] },
{ "my_field_one": "val4", "my_field_two": "val5", "my_field_three": "val6", "tokens":["somethingelse"] },
]

It is located at https://path/to/static/courses.json and I can access it directly in the browser.

HTML (loaded from database)

<div class="example example-twitter-oss">
<div class="demo">
<input class="typeahead" type="text" placeholder="Placeholder 'text'">
</div>
</div>

CSS

And CSS seems to be correct:

.tt-dropdown-menu {
  text-align: left;
}

.title,
.my-field-1 {
  font-family: Prociono;
}

.title {
  margin: 20px 0 0 0;
  font-size: 64px;
}

.example {
  padding: 30px 0;
}

.course-title {
  margin: 20px 0;
  font-size: 32px;
}

.demo {
  position: relative;
  *z-index: 1;
  margin: 50px 0;
}

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
      border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-dropdown-menu {
  width: 422px;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
      border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
      box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.example-twitter-oss .tt-suggestion {
  padding: 8px 20px;
}

.example-twitter-oss .tt-suggestion + .tt-suggestion {
  border-top: 1px solid #ccc;
}

.example-twitter-oss .my-field-2 {
  float: right;
  font-style: italic;
}

.example-twitter-oss .my-field-1 {
  font-weight: bold;
}

.example-twitter-oss .my-field-3 {
  font-size: 14px;
}

Answer 1

Solution:

Stray comma after second object in .json file.