Typeahead.js: Custom template without Handlebars

[raxan]

Hi

how to custom template without handlebars dep?

thanks

[PierBover]

http://pastebin.com/qwYafvZU

[raxan]

thanks!

[brendanfalkowski]

This was really useful. The core library should use this as the default templating example instead of tacking 20 KB on for Handlebars. For reference, in case that pastebin ever dies:

templates: {
    suggestion: function (data) {
        return '<p><strong>' + data.value + '</strong> - ' + data.year + '</p>';
    }
}

// Use this format for JSON:
// https://twitter.github.io/typeahead.js/data/films/post_1960.json

[mnquintana]

:+1:

[netwire88]

How do you access data.year? I have a similar code but the only variable I see is data.value. Do I need to modify filter in Bloodhound or something?

[brendanfalkowski]

I only tested using the example data, but try this to see exactly what's in the data object (modify the code from above and check your browser console):

suggestion: function (data) {
    console.log(data);
}

[netwire88]

It turns out typeahead doesn't like JSON names with an underscore. So image_url doesn't work but imageurl does. Very odd.

[nodiced922]

This was a great help @brendanfalkowski Thanks for directly including the code !! Ur the man

[razvanphp]

Just a note, with the new 0.11 version, this only works if you wrap everything in div instead of p. Any idea why and if this is intentional?

[ZaneCEO]

@razvanphp I foud this issue searching for confirmation to the same. The returned HTML gets converted to a DOM node, so any non-valid text screws it up.. dunno if its intentional, but smells buggy to me.

[hala3amme]

what if i have an array within the data ? how i can deal with it ?

data = [
{
category: 'category 1',
docs:['doc1', 'doc2', 'doc3']
},
{
category: 'category 2',
docs:['doc4', 'doc5', 'doc6']
},
]

[phlegx]

@PierBover thx :+1: :smile:

[PierBover]

@hala3amme you should be able form a string from that array and simply return that.

[zenithtekla]

Workaround for footer. It took me hours to figure out. I could have fixed it if I were to see this post first:

$.ajax({
  dataType: "json",
  url: "../model/json_db/formats.php"})
  .done( function(data) {

    /*    $.each(data,function(i,v){
            console.log(v.format);
            $.each(v,function(i,va){
                console.log(va);
            })
        });
      $.map(data, function(obj) { 
        console.log(obj.format + "example" + obj.format_example);
      }); http://forum.jquery.com/topic/jquery-and-json-troubles */
      // constructs the suggestion engine
      var engine = new Bloodhound({
        datumTokenizer: function (datum) {
          return Bloodhound.tokenizers.whitespace(datum.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        // `data` is an array of country names defined in "The Basics"
        local: $.map(data, function(obj) { 
            return { value : obj.format, eg: obj.format_example };
        }),
        limit: 10
      });

      // kicks off the loading/processing of `local` and `prefetch`
      engine.initialize();
     $('#scrollable-dropdown-menu .typeahead').typeahead(null, {
          name: 'data',
          displayKey: 'value',
          hint: true,
          highlight: true,
          minLength: 1,
          source: engine.ttAdapter(),
          templates: {
              empty: [
                '<div class="empty-message">',
                  'Result not found',
                '</div>'
              ].join('\n'),
              suggestion: Handlebars.compile("<div style='padding:6px'><b>{{value}}</b> - example : {{eg}} </div>"),
              // footer: "<b>Searched for "+ console.log($('input.typeahead.tt-input').val()+"</b>"
              footer: function (data) {
                // return Handlebars.compile("<b>Searched for {{data.query}} </b>")
                return '<div>Searched for <strong>' + data.query + '</strong></div>';
              }
          }
      });

[zenithtekla]

I could still use normal callback func to return suggestion but I decide to leave it there for now. Feel free to give your input.