我们如何在Typeahead.js中设置远程？

Question

在以前的版本中，我可以这样做：

$('#search').typeahead({
  name: 'Search',
  remote: '/search?query=%QUERY'
});

但是自从0.10更新以来，typeahead.js要求我们定义source我无法使之工作的内容。如何定义远程而不需要定义数据集功能？

Answer 1

Typeahead.js版本0.10.0现在使用称为建议引擎的单独组件来提供建议数据。Typeahead.js附带的建议引擎称为Bloodhound。

因此，您不能“无需定义数据集函数即可定义远程”。

可以在以下位置找到使用远程数据源的示例（我正在查询TheMovieDb API，例如尝试搜索“ Aliens”）：

代码在这里：

// Instantiate the Bloodhound suggestion engine
var movies = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e',
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(movies.results, function (movie) {
                return {
                    value: movie.original_title
                };
            });
        }
    }
});

// Initialize the Bloodhound suggestion engine
movies.initialize();

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
    // Use 'value' as the displayKey because the filter function 
    // returns suggestions in a javascript object with a variable called 'value'
    displayKey: 'value',
    source: movies.ttAdapter()
});

请注意，过滤器功能如何使您可以从非平凡的JSON数据源中选择要用作预输入建议的内容。

提前输入0.11.1的更新

对于那些使用较新版本的typeahead的用户，可以在此处找到基于原始问题的工作示例：

关于Typeahead 0.10.0，新版本（0.11.1）具有以下区别：

• “过滤器”功能已重命名为“变换”。
• 将其分配给远程源时，无需在Bloodhound对象上调用Initialize，也无需调用ttAdapter（）。
• 现在需要在远程选项哈希中指定通配符（例如％QUERY）。