带有模板的 Twitter Typeahead 始终只返回 1 行数据
Posted
技术标签:
【中文标题】带有模板的 Twitter Typeahead 始终只返回 1 行数据【英文标题】:Twitter Typeahead with template always return only 1 row of data 【发布时间】:2013-08-03 06:32:58 【问题描述】:我正在尝试制作一个与 Twitter 在示例页面上显示的示例类似的示例,更具体地说是模板名为 Open Source Projects by Twitter 的示例,我得到了部分工作,但它仅且始终仅显示 1 行结果,即使我将它设置为 10,我正在提取 Yahoo Finance 数据,结果是 JSON,并且在 Firebug 中有效,例如键入字母“a”将生成类似的 JSON 对象:[Object symbol="A", name="Agilent Technologies Inc.", exch="NYQ", more..., Object symbol="^DJI", name="Dow Jones Industrial Average", exch="DJI", more..., more objects...]
我的 JS 文件有这个 typeahead 设置
$('.symbols .typeahead').typeahead(
//name: 'symbols',
//remote: 'yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY',
limit: 3,
remote:
url: 'yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY',
filter: function(parsedResponse)
var dataset = [];
dataset = parsedResponse.data;
console.log(parsedResponse.data);
console.log(dataset); // debug the response here
return dataset;
,
//prefetch: 'symbols.json',
template: [
'<p class="symbols-exchange">exchDisp</p>',
'<p class="symbols-symbol">symbol</p>',
'<p class="symbols-name">name</p>'
].join(''),
engine: Hogan
);
parsedReponse.data
和 dataset
的 console.log 都显示了一个有效的数组。但最后,无论如何它仍然总是显示第一个结果,并且模板正在像它看起来的那样工作,现在在我的 html 代码中,我有来自 Twitter 的示例正在运行,它总是显示所有结果,但我的只有 1..所以为什么?如果需要,我也可以发布我的 HTML 代码,我只是尝试制作示例,所以 HTML 仍然很简单
我还有一个第二个问题,当它显示 1 个结果时,即使我点击它来选择它,我的输入中也没有显示任何内容,尽管我想要符号值 p>
这是我的 HTML 代码的一部分
<form>
<div class="example symbols">
<h2 class="example-name">Symbols</h2>
<p class="example-description">Defines a custom template and template engine for rendering suggestions</p>
<div class="demo">
<input class="typeahead" type="text" placeholder="symbol">
</div>
</div>
</form>
【问题讨论】:
【参考方案1】:在下班后工作了几天后,我终于找到了它......我忘记了一件现在可以解决我两个问题的小东西。我在我的 JS 中忘记了这段小代码:valueKey: 'symbol'
,瞧!!!这就是为什么即使在我选择了唯一显示的行(我的问题 #2)之后我在输入中看不到任何内容,也是为什么它只显示 1 行建议。现在我想出了一个更简洁的代码:
$('.symbols .typeahead').typeahead(
limit: 5,
valueKey: 'symbol',
remote:
url: 'yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY',
filter: function(parsedResponse)
return parsedResponse.data;
,
template: [
'<p class="symbols-exchange">exchDisp</p>',
'<p class="symbols-symbol">symbol</p>',
'<p class="symbols-name">name</p>'
].join(''),
engine: Hogan
);
【讨论】:
谢谢,我没有看到我错过了这篇文章,因为它在字符串数组上不是必需的,而且由于我从字符串开始,然后在对象之后,我监督了这篇文章... 谢谢。很有帮助!以上是关于带有模板的 Twitter Typeahead 始终只返回 1 行数据的主要内容,如果未能解决你的问题,请参考以下文章
如何防止Twitter typeahead用所选值填充输入?
Twitter 的 typeahead.js 建议没有样式(没有边框、透明背景等)