Wil*_*lor 5 twitter twitter-typeahead
我使用 Bloodhound 从数据库中获取数据，然后使用 twitter typeahead 显示搜索框下方的选项。
目前，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()
}
}
)
更新
事实证明，预先输入中有一个奇怪的错误。它似乎只适用于将“限制”属性设置为最大值 4 的情况。如果将“限制”设置为 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()
}
}
\n\n\n此问题已得到解决。请直接查看更新2。
\n
我在JSFIDDLE中重现了这个问题。
\n\n正如你所说，这是一个错误。您还报告说，如果您这样做，这个错误就会消失limit:4。
实际上，就我而言，或者在 FIDDLE 中，我经历过这个问题发生在number of results returned = value in limit.
要在 FIDDLE 中测试此问题，请执行以下操作：\n注意：搜索 1947 正好返回 5 行。
\n\n当限制设置为 4 时： \n搜索 1947 将返回 4 个结果。
\n\n当限制设置为 5 时： \n搜索 1947 不会返回任何结果。
\n\n当限制设置为 6 时： \n搜索 1947 返回一个 1 结果 - 第一个结果。
\n\n
\n因此，如果您将限制设置为比实际返回结果数少 1，那么这将继续有效。\n
我也在他们的github 页面提交了这个问题。我将跟踪这个问题，并根据需要不断更新这个答案。
\n\n在这里找到了一个类似的问题。“Luciano Garc\xc3\xada Bes”似乎已经找到了解决方案。请直接在那里投票。
\n\n基本上他说：
\n\n\n\n\n它会在附加提示之前计算渲染提示的数量，因此如果提示数量等于限制，它将附加一个空数组。
\n
为了防止这种情况，我只是交换了第 1723 行和第 1724 行，所以它看起来像这样：
\n\nthat._append(query, suggestions.slice(0, that.limit - rendered));\nrendered += suggestions.length;\n此问题已在 pull 1212上修复。结束我们自己的问题1312。该错误已按照 中讨论的相同方式得到纠正update 1。