's引导预先输入设置

Twitter's Bootstrap typeahead setup

本文关键字：输入 设置      更新时间：2023-09-26

我使用的是来自Twitter的官方示例。主要问题是，我可能不知道如何使用霍根怪物。JS端:

$("#search_name").typeahead({
    name: 'name',
    remote: {
        url: '/entities/search_autocomplete.json?query=%QUERY',
        template: '<p><strong>{{id}}</strong> – {{name}}</p>',
        engine: Hogan
      }
});

服务器以JSON格式返回数据，结构为:

[{'"id'":1234,'"name'":'"Blah blah...'",'"tokens'":['"blah...'",'"blah'"]}]

刚刚从我们的一个项目中获取了这段代码，应该可以帮助您理解转换外部JSON数组和在自定义自动完成提示中输出所需的标记:

$('input').typeahead({
    header: 'Your Events',
    template: [
    '<img class="ta-thumb" src="https://graph.facebook.com/{{id}}/picture?type=square" />',
    '<p class="ta-h1">{{name}}</p>',
    '<p class="ta-p">{{start_time}}</p>'
    ].join(''),
    limit: 3,
    remote: {
        url: 'https://graph.facebook.com/me/events?access_token=' + access_token,
        filter: function(parsedResponse) {
            var dataset = [];
            for(i = 0; i < parsedResponse.data.length; i++) {
                dataset.push({
                    name: parsedResponse.data[i].name,
                    start_time: parsedResponse.data[i].start_time,
                    id: parsedResponse.data[i].id,
                    value: parsedResponse.data[i].name,
                    tokens: [parsedResponse.data[i].id, parsedResponse.data[i].name]
                });
            }
            return dataset;
        },
    },
    engine: Hogan
});

你需要下载Hogan.js模板编译器并将其包含在你的标记中(例如，将其用作外部脚本或通过像Require.js这样的模块加载器)。这将设置Hogan变量。

我还建议查看Graph API调用，以便更好地理解数组转换。

希望这对你有帮助:)

相关文章：