Twitter typeahead 只显示了 Bloodhound 返回的一些项目

Question

我正在使用 Bloodhound 从数据库中获取数据，然后使用 twitter 提前输入以显示搜索框下方的选项。

目前，bloodhound 部分正在查找所需的对象，但 typeahead 未显示它们。

 var artist_retriever = new Bloodhound({
    // turns input query into string of tokens to send to database.
    queryTokenizer: Bloodhound.tokenizers.whitespace,

    remote: {
              // URL to fetch information from
              url: "/artists?query=%QUERY",
              wildcard: '%QUERY',
              // Manipulate the array of artists returned, for display to user.
              transform: function(array_of_artists){
                            // array of artists is returned from DB.
                            // Put each artist into a readable string
                            array_of_artists = create_artist_descriptions(array_of_artists)

                            console.log(array_of_artists)
                            // Returns correctly:
                            // [
                            //   { artist: "Joe" },
                            //   { artist: "Bob" },
                            //   { artist: "Smith" },
                            //   { artist: "Tom" },
                            // ]

                            return array_of_artists
                          }
            },

    // turns return value into a string of results, with this 'key' before each result.
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('artist'), 


  });

// display:



// instantiate the typeahead UI
  // https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md
  searcher = $('.typeahead').typeahead(
    // options:
    {
      hint: false
    },
    // datasets:
    {
      // Where to get data: User the bloodhound suggestion engine:
      source: artist_retriever.ttAdapter(),
      // Which attribute of each result from the database should be shown:
      displayKey: 'artist',
      templates: {
                    notFound: new_artist_option_template(),
                    footer: new_artist_option_template()
                 }
    }
  )

更新

事实证明，typeahead 中有一个奇怪的错误。它似乎只适用于将“limit”属性设置为最大 4 的情况。如果将“limit”设置为 5，则预先输入不会给您任何信息。

searcher = $('.typeahead').typeahead(
    // options:
    {
      hint: false
    },
    // datasets:
    {
      // Where to get data: User the bloodhound suggestion engine:
      source: artist_retriever.ttAdapter(),
      // Which attribute of each result from the database should be shown:
      displayKey: 'signature',
      limit: 4, // This can do a max of 4! Odd.
      templates: {
                    notFound: new_artist_option_template(),
                    footer: new_artist_option_template()
                 }
    }

Answer 1

This issue has been solved. Please see update 2 directly.

我在这个 JSFIDDLE 中复制了这个问题.

正如你所说，这是一个错误。您还报告说，如果您这样做 limit:4，这个错误就会消失。 .

实际上在我的一端，或者在 FIDDLE 中，我经历过这个问题出现在 number of results returned = value in limit 时。 .

要在 FIDDLE 中测试此问题，请执行以下操作:
注意:搜索 1947 正好返回 5 行。

当限制设置为 4 时:
搜索 1947 返回 4 个结果。

当限制设置为 5 时:
搜索 1947 一无所获。

当限制设置为 6 时:
搜索 1947 返回一个 1 结果 - 第一个结果。

因此，如果您将限制设置为比返回的实际结果数少 1，那么这将继续工作。

我也在他们的 github page 中提交了这个问题.我将跟踪此问题，并会根据需要不断更新此答案。

更新 1:

找到了一个 similar question on SO here . “卢西亚诺·加西亚·贝斯”似乎已经找到了解决方案。请在那里直接投票。

基本上他说:

It's counting the number of rendered hints before appending them, so if the number of hints equals the limit it'll append an empty array.

为了防止这种情况，我只是切换了 1723 和 1724 行，所以它看起来像这样:

that._append(query, suggestions.slice(0, that.limit - rendered));
rendered += suggestions.length;

更新 2:

此问题已在 pull 1212 上修复.关闭我们自己的问题 1312 .该错误已按照 update 1 中讨论的相同方式得到纠正。 .