如何在Typeahead.js中设置远程选项？

Question

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

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

但自从0.10版本更新以来，typeahead.js要求我们定义source，但我无法使其工作。如何在不定义数据集函数的情况下定义远程内容？

- Zuhaib Ali

Answer 1

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

因此您无法“定义远程而不必定义数据集函数”。

这个例子使用远程数据源（我正在查询TheMovieDb API，例如尝试搜索“Aliens”）可以在这里找到：

http://jsfiddle.net/Fresh/UkB7u/

代码在这里:

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

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

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
  displayKey: 'value',
  source: movies.ttAdapter()
});

注意filter函数如何允许您从非平凡的JSON数据源中选择要用作类型提示建议的内容。

---

更新Typeahead 0.11.1

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

http://jsfiddle.net/Fresh/bbzt9hcr/

与 Typeahead 0.10.0 相比，新版本（0.11.1）具有以下区别：

• "filter" 函数已更名为 "transform"。
• 不需要在 Bloodhound 对象上调用 initialize，也不需要在将其分配给远程源时调用 ttAdapter()。
• 现在需要在远程选项哈希中指定通配符（例如 %QUERY）。

- Ben Smith

---

很遗憾，因为 bloodhound 提供的功能远远超出了我所需的范围。在 0.9.3 之前，它曾经非常简单。 - Zuhaib Ali

官方文档提到我们可以使用自定义函数作为“source”。我猜这会更简单，只要我们能够弄明白如何做。 - Zuhaib Ali

我同意Zuhaib的观点，我认为Bloodhound使得Typeahead更加困难且有些臃肿。 - Phil

在之前的typeahead.js版本中，Bloodhound功能已经存在，只是与jQuery插件紧密耦合。在v0.10中，我将这两个功能解耦，以允许不需要高级建议引擎的开发人员定义自己的数据源。因此，API并不像以前那么简单-我希望在未来的发布版本中解决这个问题。 - jharding

血猎引擎只是把一切变得超级复杂。我只需要一个正常工作的自动完成功能，而不是建议引擎。 # 过度设计。 - Robert Reiz

Answer 2

好的，你可以做类似这样的事情：

$('input#keywords').typeahead({
    highlight: true,
},
{
  name: 'brands',
  display: 'value',
  source: function(query, syncResults, asyncResults) {
    $.get('/search?q=' + query, function(data) {
      asyncResults(data);
    });
  }
})

来源: 不使用Bloodhound使用Typeahead.js

- Aqabawe

---

干杯！终于有一个例子可以不使用Bloodhound来完成它。 - Maximc

现在你能否做相反的事情，并展示如何更新查询URL（仅使用Bloodhound而不是Typeahead）？ - SumNeuron

Typescript 版本需要 asyncResults!(data);（感叹号） - xhafan

Answer 3

如果您想使用ajax POST数据而不是GET数据进行更可控的ajax调用，您可以使用以下结构：

var meslekler = new Bloodhound({
    datumTokenizer: function (d) {
            return Bloodhound.tokenizers.whitespace(d.isim);
        },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'my_url_with_or_without_%query_token.php',
        ajax:{
            type:"POST",
            cache:false,
            data:{
                limit:5
            },
            beforeSend:function(jqXHR,settings){
                settings.data+="&q="+$('.tt-input').typeahead('val');
            },
            complete:function(jqXHR,textStatus){
            meslekler.clearRemoteCache();
            }
        }
    }
});
meslekler.initialize();
$('.typeahead').typeahead(null, {
    name:'meslekler',
    displayKey: 'isim',
    source: meslekler.ttAdapter()
});

- MERT DOĞAN

---

对象不支持属性或方法'clearRemoteCache'。 - Joseph Norris

它可以在最新版本中更改。我去年使用过这个函数，而且没有出现错误。 - MERT DOĞAN