使用bootstrap typeahead在Handlebar模板中显示建议

时间:2013-06-28 07:03:52

标签: backbone.js requirejs handlebars.js bootstrap-typeahead

我可以使用bootstrap typeahead使用以下代码显示建议:

    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,

    });

但是我想在建议中将建议显示为ID名称,而不是使用hbs文件的id。我的hbs文件如下所示:abc.hbs(ABC)

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

我尝试了以下代码,但在建议中获得了单个字母:

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

    });

当我在源代码中仅提供xyz时,我收到单个字母的建议。但是当我在源代码中提供jasonxyzObj时,我收到错误:第4行的bootstrap.min.js中出现“TypeError:e.toLowerCase不是函数”。我的引导版本是“2.3.1”。

使用bootstrap typeahead在把手文件(HBS)中显示建议的正确方法是什么。

1 个答案:

答案 0 :(得分:1)

当前与Twitter Bootstrap一起打包的预先输入插件不允许您使用除字符串数组之外的任何内容。您正在展示的代码看起来像是在尝试使用Twitter typeahead插件,这个插件实际上是Bootstrap的一个独立插件。

博客文章: https://blog.twitter.com/2013/twitter-typeaheadjs-you-autocomplete-me

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

我认为如果你在项目中加入它可能会开始为你工作。