Question

我正在尝试制作类似于Twitter在示例页面上显示的示例，更具体地说是具有名为Open Source Projects by Twitter的模板的示例，我得到了部分工作的东西，但它只显示了一行结果即使我将其设置为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文件有这种先行设置

$('.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个结果时，即使我点击它选择它，我的输入中也没有显示任何结果，尽管我希望有符号值

以下是我的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>

Answer 1

经过几个小时的工作后，我终于找到了......我忘记了一件小事，现在解决了我的两个问题。我在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
});

带有模板的Twitter Typeahead始终只返回1行数据

1 个答案: