我正在尝试制作一个类似 Twitter 示例页面上展示的例子,更具体地说,是使用名为Twitter的开源项目的模板。虽然我设定了结果显示10行,但只能始终显示1行结果,我正在获取 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...}, 更多对象...]
我的 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
});
使用 console.log 打印出 parsedReponse.data
和 dataset
都显示了有效的数组。但最后它总是显示第一个结果,似乎模板正在正常工作,现在在我的 HTML 代码中,我运行了 Twitter 的示例并且它总是显示所有结果,但是我的只显示了一个...为什么呢?如果需要,我也可以发布我的 HTML 代码,我只是想做个例子,所以 HTML 还很简单。我还有第二个问题,即使我点击选择那一个结果,输入框中也没有显示任何内容,虽然我想要的是符号值。
这是我的 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>