小编典典

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

javascript

在以前的版本中,我可以这样做:

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

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


阅读 252

收藏
2020-05-01

共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)。
2020-05-01