CODEWITHSUNDEEP
backbone.jsrequirejshandlebars.jsbootstrap-typeahead
Cindrella
Cindrella

Reputation: 1721

show suggestions in Handlebar template using bootstrap typeahead

I am able to show the suggestions using bootstrap typeahead with below code:

    var xyz =JSON.stringify(this.collection.toJSON());      

    var jasonxyzObj = $.parseJSON(xyz);
    var xyzArray = [];

    for (var i = 0; i < jasonxyzObj.length; i++) {
       xyzArray.push(jasonxyzObj[i].id'');
    }

    $(".abc-class").typeahead({
        source: xyzArray,

    });

But I want to show the suggestions as id name count in suggestions instead of just id using hbs file. My hbs file looks like below: abc.hbs (ABC)

    <table class="table">
    <tr>
     <td>{{name}}</td>
     <td>{{id}}</td>
     <td>{{count}}</td>
    </tr>
    </table>

I have tried below code but getting single letters in suggestions:

var xyz =JSON.stringify(this.collection.toJSON());      

    var jasonxyzObj = $.parseJSON(xyz);
    var xyzArray = [];

    for (var i = 0; i < jasonxyzObj.length; i++) {
       xyzArray.push(jasonxyzObj[i].id'');
    }

    $(".abc-class").typeahead({
        source: xyz,
          template: ABC,
        engine:Handlebars

    });

when I give just xyz in source I am getting single letter suggestions. But when I give jasonxyzObj in source I am getting error: "TypeError: e.toLowerCase is not a function" in bootstrap.min.js in line6. My bootstrap version is "2.3.1".

What is the correct way to show the suggestion in handlebars file(HBS) using bootstrap typeahead.

Upvotes: 2

Views: 2100

Answers (1)

Michael Cox
Michael Cox

Reputation: 1301

The typeahead plugin that is currently packaged with Twitter Bootstrap does not let you use anything except for a string array. The code you're showing looks like you're trying to use the Twitter typeahead plugin which is actually a separate plugin from Bootstrap right now.

Blog Post: https://blog.twitter.com/2013/twitter-typeaheadjs-you-autocomplete-me

Github Repo: https://github.com/twitter/typeahead.js

I think if you include that in your project it might start working for you.

Upvotes: 1

Related Questions