3

我正在使用 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>
4

2 回答 2

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;
        }
    }
});

希望能帮助到你。

于 2013-08-27T09:38:38.593 回答
0

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

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

从自述文件中提取：

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

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

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

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

  • 模板- 渲染部分时要使用的模板哈希。

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

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

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

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

于 2013-08-28T13:02:38.880 回答