Typeahead.js - 填充数据集答案

【问题标题】：Typeahead.js - Populate datasetTypeahead.js - 填充数据集
【发布时间】：2013-08-22 15:44:03
【问题描述】：

我正在使用 Twitter typeahead.js 标头，以下是我的有效代码。但是我想知道是否有一种方法可以使用函数而不是本地数组来填充我的数据集。非常感谢您的帮助。

    <input id="look" placeholder="search" autocomplete="off" />
        <button id="btn">Submit</button>

        <script type="text/javascript">
            $("#look").typeahead({
                name: 'accounts',
//Would like to use a function to populate my dataset here instead of this array
                local: ['timtrueman', 'JakeHarding', 'vskarich']
            });

            $("#btn").click(function () {
                $("#look").typeahead('setQuery', 't');
                $("#look").focus();
            });

        </script>
</body>

【问题讨论】：

你能告诉我们一个你想如何填充它的例子吗？还是您的意思是使用 AJAX 和 typeahead.js？
我也想知道怎么做。我想要一个 js 模块来处理我所有的 AJAX 通信，并希望将其插入 typeahead.js
嗨，我想做这样的事情：local: function PopulateList(){}。我正在调用 c# Web 服务来填充列表。我希望这会有所帮助。
twitter.github.io/typeahead.js/examples 可能有帮助

标签： jquery typeahead.js

【解决方案1】：

由于local 仅提供静态数据，我认为remote 更适合您的需求：

$('#look').typeahead({
    name: 'accounts',
    remote: '/your/backend/url?q=%QUERY'
});

所以 typeahead 将发送 AJAX 请求到 /your/backend/url 参数 q 值是你输入的值。您的后端应该能够针对该查找请求返回响应。

如果您想调试来自后端的响应并处理该数据，请使用：

$('#look').typeahead({
    name: 'accounts',
    remote: {
        url: '/your/backend/url?q=%QUERY',
        filter: function(resp) {
            var dataset = [];
            console.log(resp); // debug the response here

            // do some filtering if needed with the response          

            return dataset;
        }
    }
});

希望对你有帮助。

【讨论】：

【解决方案2】：

这将在即将发布的版本 (v0.10.0) 中提供。

请参阅 GitHub 上版本自述文件中 Sections 下的 source 参数。

自述文件摘录：

预输入由一个或多个部分组成。对于简单的用例，一节通常就足够了。但是，如果您想构建类似于 twitter.com 上的 search typeahead，你需要多个部分。可以使用以下选项配置部分。

name – 部分的名称。默认为随机数。

source – 该部分的支持数据源。可以是数据集或带有签名的函数（查询，cb）。如果后者，预计 cb 将使用一组数据调用，这些数据是查询的匹配项。必填。

highlight – 如果为 true，则在呈现建议时，文本节点中当前查询的模式匹配将被包裹在强元素。默认为 false。

templates – 渲染部分时使用的模板哈希。

empty – 当给定查询有 0 个建议可用时呈现。可以是 HTML 字符串或预编译模板。如果它是预编译的模板，传入的上下文将包含查询。

header – 呈现在该部分的顶部。可以是 HTML 字符串或预编译模板。如果是预编译模板，传入的上下文将包含查询和 isEmpty。

footer – 呈现在该部分的底部。可以是 HTML 字符串或预编译模板。如果是预编译模板，传入的上下文将包含查询和 isEmpty。

suggestion – 用于呈现单个建议。如果设置，这必须是预编译的模板。关联的基准对象将服务作为上下文。默认为包裹在 p 标签中的数据的值。

【讨论】：