Попадая typeahead.js для работы с динамическим содержимым, бутылки и Hogan

Question

Ожидаемое поведение

Поле поиска должно показывать результаты как «Source проектов, открытых в Twitter» например на:

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

Текущее поведение

• нет выпадающий не Appe когда я вводю текст поиска.
• В Firebug нет ошибок.
• Все необходимые контейнерные контейнеры, кажется, загружены (но скрыты с display:none) под полем поиска.
• Результаты не генерируются и не отображаются.
• Firebug > Net В случае загрузки содержимого отображается запрос GET для json-файла, а содержимое доступно на вкладке ответа.

Устранение

Dynamic Content

содержание сайта загружается динамически через getJSON().

Hogan и машинописный скрипты включены в главы

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

бутылки и Hogan

Я использую бутылку, которая также использует заполнитель, используемый по умолчанию Хоган т.е. {{value here}}.

Так Hogan.js, я изменил разделители по умолчанию из:

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

к:

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

Функция

Я создал функцию, которая будет выполняться после того, как динамический Содержимое загружено:

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

Вызов

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

JSON

Мой JSON файл кажется правильным:

[ 
{ "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"] }, 
] 

Он расположен в https://path/to/static/courses.json, и я могу получить к нему доступ непосредственно в браузере ,

HTML (загружается из базы данных)

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

CSS

И CSS кажется правильным:

.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

Решение:

Плавная запятая после второго объекта в файле .json.