Twitter Typeahead模板总是只返回1行数据

Question

Twitter Typeahead模板总是只返回1行数据

12

我正在尝试制作一个类似 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>

- ghiscoding

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ghiscoding · Accepted Answer

在工作时间之后的几天里，经过努力，我终于发现了问题所在...我忘记了一件小事，这解决了我的两个问题。我在JS中忘记了这个小代码片段：valueKey: 'symbol'，然后就大功告成了！！！这也是为什么即使我选择了唯一显示的行（我的问题＃2），我也无法在输入框中看到任何内容，以及为什么只显示了一个提示行。现在为了更干净的代码，我想出了以下方法：

$('.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
});