typeahead upgrade - BEFORE

by rwone

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/hogan.js/2.0.0/hogan.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<p>Type "title01" or "area01" for an example:</p>
<div class="course_lookup">
    <div class="demo">
        <input class="typeahead" type="text" placeholder="Enter subject or subject area">
    </div>
</div>

CSS

/* ========================== BEGIN course search css */

.tt-dropdown-menu {
text-align: left;
height: 210px;
overflow-y: auto;
}

.title,
.course-title {
font-family: "petitalightregular";
}

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

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

.demo {
position: relative;
*z-index: 1;
margin-top: 30px;
}

.typeahead,
.tt-query,
.tt-hint {
width: 440px;
height: 26px;
padding-left: 10px;
font-size: 14px;
line-height: 26px;
border: 2px solid #E4E4E4;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
}

.typeahead {
background-color: #fff;
}

.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);
}

/*new */

.typeahead,
.tt-input,
.tt-hint {
width: 440px;
height: 26px;
padding-left: 10px;
font-size: 14px;
line-height: 26px;
border: 2px solid #E4E4E4;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
}

.tt-input {
-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);
}
/* end */

.tt-hint {
color: #999
}

.tt-dropdown-menu {
width: 452px;
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: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

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

.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #f5f3f3;
}

/* new see https://github.com/twitter/typeahead.js/blob/master/doc/migration/0.10.0.md#precompiled-templates-are-now-required */
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #f5f3f3;
}
/* end */

.tt-suggestion p {
margin: 0;
}

.course_lookup .tt-suggestion {
padding: 8px 20px;
}

.course_lookup .tt-suggestion + .tt-suggestion...

JavaScript

// Notes:
// 
// Below, I am using 'local' instead of the desired 'prefetch' in order to show functionality in jsFiddle.
// 
// Desired Behaviour:  
//
// Perform the following upgrades and still have the original functionality working.
//
// - Upgrade hogan from 2.0.0 to 3.0.2
// - Upgrade typeahead from 0.9.3 to 0.10.5
//
// I think the CDN links for these upgrades are:
//
// http://cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.2/hogan.js
// http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.jquery.min.js
//
// For reference, these are the links used in this jsFiddle:
//
// http://cdnjs.cloudflare.com/ajax/libs/hogan.js/2.0.0/hogan.js
// http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js

// hogan attempts - don't work
//var template = "<p class=\"course_area\">{{course_area}}</p><p class=\"course_title\">{{course_title}}</p><p class=\"course_description\">{{course_description}}</p>";  
//var compiled_template = Hogan.compile(template);

function searchReadyFunction() {
    $('.course_lookup .typeahead').typeahead({
        name: 'courses',
        valueKey: 'course_title',  
        local: [
{ "course_area": "Area01", "course_title": "title01", "course_description": "Description text 01", "tokens":["title01","Area01"]},
{ "course_area": "Area02", "course_title": "title02", "course_description": "Description text 02", "tokens":["title02", "Area02"]},
{ "course_area": "Area03", "course_title": "title03", "course_description": "Description text 03", "tokens":["title03","Area03"]},
{ "course_area": "Area02", "course_title": "title04", "course_description": "Description text 04", "tokens":["title04","Area02"]},
{ "course_area": "Area02", "course_title": "title05", "course_description": "Description text 05", "tokens":["title05","Area02"]},
{ "course_area": "Area04", "course_title": "title06", "course_description": "Description text 06", "tokens":["title06", "Area04"]},
{ "course_area": "Area05", "course_title": "title07",...