我们如何在Typeahead

我们如何在Typeahead

本文介绍了我们如何在Typeahead.js远程设置?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在previous版本我可以这样做:

In previous versions I could do:

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

不过,由于 0.10 更新,typeahead.js要求我们定义,我不能让工作。我如何远程定义,而无需定义一个数据集的功能?

But since the 0.10 update, typeahead.js is asking us to define source which I cannot make to work. How do I define remote without having to define a dataset function?

推荐答案

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

Typeahead.js version 0.10.0 now uses a separate component called a suggestion engine for providing the suggestion data. The suggestion engine which ships with Typeahead.js is called Bloodhound.

因此​​,你不能定义远程无需定义数据集功能。

Hence you cannot "define remote without having to define a dataset function".

这与远程数据源(我查询TheMovieDb API,尝试搜索外星人为例)工作的一个例子可以在这里找到:

An example of this working with a remote data source (I'm querying the TheMovieDb API, try searching for "Aliens" for example) can be found here:

在code是在这里:

// 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数据源中的预输入建议使用什么。

Note how the filter function allows you to choose what you want to use as a typeahead suggestion from a non-trivial JSON data source.

对于那些正在使用预输入,基于该原来的问题的工作示例的较新版本可以在这里找到:

For those that are using the newer version of typeahead, a working example based off the original question can be found here:

使用对于预输入0.10.0,新版本(0.11.1)具有以下不同之处:

With respect to Typeahead 0.10.0, the new version (0.11.1) has the following differences:


  • 过滤器功能已更名为改造。

  • 不需要调用初始化警犬对象上,我们也不需要调用ttAdapter(其分配到远程数据源时)。

  • 现在,需要指定远程哈希选项中的通配符(例如%查询)。

这篇关于我们如何在Typeahead.js远程设置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-11 20:08