Question

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

Answer 1

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

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

因此，typeahead将使用参数/your/backend/url向q发送AJAX请求，其值为您键入的值。您的后端应该能够返回该查找请求的响应。

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

$('#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;
        }
    }
});

希望它有所帮助。

Answer 2

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

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

摘自自述文件：

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



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



来源 - 该部分的后备数据源。可以是数据集，也可以是带签名的函数（query，cb）。如果   后者，cb预计会被一系列基准调用   查询匹配。必需的。



突出显示 - 如果为true，则在呈现建议时，文本节点中当前查询的模式匹配将包含在   强大的元素。默认为false。



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



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



标题 - 在该部分的顶部呈现。可以是HTML字符串或预编译模板。如果它是预编译模板，   传入的上下文将包含query和isEmpty。



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



建议 - 用于呈现单个建议。如果设置，则必须是预编译的状态。相关的基准对象将起作用   作为背景。默认为包含在p标签中的原点值。

Typeahead.js - 填充数据集

2 个答案: