Twitter的Bootstrap Typeahead设置

Question

我将使用官方Twitter示例。主要问题是，我可能不知道如何使用Hogan monster。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\"]}]

- valk

---

那看起来不像是 JSON。 - Lee Meador

抱歉，这是一段 Ruby 代码，它被转换为 JSON 格式，输出几乎相同，即所有的 :asdf 都被转换为 "asdf" 等等。这只是更易读，但无论如何，已将其转换为 JSON。 - valk

Answer 1

刚刚从我们的一个项目中取出了这段代码，它能帮助你理解将外部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 调用 以更好地理解数组转换。

希望这有所帮助 :)

- Ryan Brodie

---

非常感谢你，Ryan。我对于typeahead有几个版本感到有些困惑，最终我使用了来自Twitter默认库在Github上的版本：https://github.com/twitter/bootstrap/blob/master/js/bootstrap-typeahead.js。令人困惑的是，当你从http://twitter.github.io/bootstrap/下载TB时，它并不包括typeahead。无论如何，感谢你，伙计！ - valk

附注：Bootstrap确实包含Typeahead（我刚刚遇到这个问题），但是包含的版本至少落后于几个修订版本。它为您提供了自动完成的大部分功能集，但没有数据加载/预取/本地存储好处。我最终使用了定制器：http://twitter.github.io/bootstrap/customize.html，并完全关闭了基于BS的Typeahead。 - Marc Bollinger

当然，但是由于 OP 参考了 Typeahead.js 的文档（http://twitter.github.io/typeahead.js）而非 Bootstrap 的自有分支，我没有想到需要提及它。请注意，只要在 bootstrap.js 之后包含 typeahead.js，就不会遇到任何兼容性问题。 - Ryan Brodie