CODEWITHSUNDEEP
typeahead.jshogan.js
user1063287
user1063287

Reputation: 10869

How to use typeahead with prefetch, hogan templating and multi key JSON file?

I had implemented hogan.js alongside typeahead.js at these version states:

I'm trying to upgrade to:

This was my working code before the plugin upgrade:

HTML

<div class="course_lookup">
    <div class="demo">
        <input class="typeahead" type="text" placeholder="Enter subject or subject area">
    </div>
</div>

jQuery

function searchReadyFunction() {
    $('.course_lookup .typeahead').typeahead({
        name: 'courses',
        valueKey: 'course_title',  
        prefetch: "/static/courses.json",
        template: [
            '<p class="course_area">{{course_area}}</p>',
            '<p class="course_title">{{course_title}}</p>',
            '<p class="course_description">{{course_description}}</p>'
        ].join(''),
        engine: Hogan  
    }).on('typeahead:selected', function(event, selection) {
        var course_name = selection.course_title.toLowerCase();
        // ...
    });
}

JSON

My JSON data structure was:

[
{ "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", "course_description": "Description text 07", "tokens":["title07", "Area05"]}
]

jsFiddle

jsFiddle shows original functionality achieved with older plugins.

The search would match the token values in the JSON file and return the results in the defined template with matching values ie course_area, course_title and course_description.

Upgrading typeahead causes this functionality not to work - there are no errors, it just doesn't work.

There is an official guide to upgrading typeahead here:

Migrating to typeahead.js v0.10.0

And a similar question here:

Migrating to Typeahead 0.10+ with Hogan

My data is prefetched data however, and, as shown above, the function needs to return the values of three 'keys' from the JSON file.

The official typeahead prefetch example does not take into account such a scenario (where the source is not just a list, but comprised of key:value pairs), as far as I can tell.

How do I get the original functionality working again?

Upvotes: 4

Views: 1155

Answers (1)

fadomire
fadomire

Reputation: 1975

Here is your fiddle with working upgrade of Hogan and Typeahead : http://jsfiddle.net/5dpo4r4a/41/

To make your code work, you need to use the new syntax for Typeahead. The first argument is an option hash to configure behavior and the second is the suggestion engine config. You also need to declare the suggestion engine and initialize it.

var dataSource = new Bloodhound({
  datumTokenizer: function(d) { 
    return Bloodhound.tokenizers.whitespace(d.tokens.join(' ')); 
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '/static/courses.json'
});

dataSource.initialize();

function searchReadyFunction() {
  $('.course_lookup .typeahead').typeahead({
  },{
    name: 'courses',
    valueKey: 'course_title',
    template: suggestion: compiled_template.render.bind(compiled_template),
    source: dataSource.ttAdapter()
  }).on('typeahead:selected', function(event, selection) {
    var course_name = selection.course_title.toLowerCase();
    // ...
  });
}

Let me know if you need more infos.

Upvotes: 2

Related Questions