带有模板的 Twitter Typeahead 始终只返回 1 行数据 [英] Twitter Typeahead with template always return only 1 row of data

问题描述

我正在尝试制作一个与 Twitter 在示例页面上显示的示例类似的示例，更具体地说是带有名为 Twitter 的开源项目，我得到了一些部分工作，但它只是并且总是只显示 1 行结果，即使我将其设置为 10，我正在提取雅虎财经数据，结果是 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({//名称:'符号'，//远程:'yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY',限制:3，偏僻的: {url: 'yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY',过滤器:函数(解析响应){var 数据集 = [];数据集 = parsedResponse.data;console.log(parsedResponse.data);控制台日志(数据集)；//在这里调试响应返回数据集；}},//预取:'symbols.json',模板: ['<p class="symbols-exchange">{{exchDisp}}</p>','<p class="symbols-symbol">{{symbol}}</p>','<p class="symbols-name">{{name}}</p>'].加入('')，发动机:霍根});

parsedReponse.data 和 dataset 的 console.log 都显示了一个有效的数组.但最后它仍然总是显示第一个结果，不管怎样，模板工作得像它看起来的那样，现在在我的 HTML 代码中，我有来自 Twitter 的示例正在运行，它总是显示所有结果，但我的只有 1..所以为什么?如果需要，我也可以贴出我的HTML代码，我只是在做例子，所以HTML仍然很简单

我还有一个第二个问题，当它显示 1 个结果时，即使我点击它来选择它，我的输入中也没有显示任何内容，尽管我想要符号值>

这是我的部分 HTML 代码

<div class="示例符号"><h2 class="example-name">符号</h2><p class="example-description">定义用于呈现建议的自定义模板和模板引擎</p><div class="demo"><input class="typeahead" type="text" placeholder="symbol">

</表单>

解决方案

经过几天下班后的工作，我终于找到了......我忘记了一件小事，现在可以解决我的两个问题.我已经忘记了我的 JS 中的一小段代码:valueKey: 'symbol' 瞧！！！这就是为什么即使在我选择了唯一显示的行(我的问题#2)以及为什么它只显示了 1 行建议之后，我在输入中也看不到任何内容.现在为了更清晰的代码，我想出了这个:

$('.symbols .typeahead').typeahead({限制:5，valueKey: '符号',偏僻的: {url: 'yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY',过滤器:函数(解析响应){返回 parsedResponse.data;}},模板: ['<p class="symbols-exchange">{{exchDisp}}</p>','<p class="symbols-symbol">{{symbol}}</p>','<p class="symbols-name">{{name}}</p>'].加入('')，发动机:霍根});

I am trying to make a similar example as what Twitter show on the examples page, more specifically the one with the template named Open Source Projects by Twitter and I got something partially working but it only and always show just 1 row of result even though I set it to be 10, I am pulling Yahoo Finance data and the result are JSON and is valid inside Firebug, for example typing letter "a" will make a similar JSON Object of: [Object { symbol="A", name="Agilent Technologies Inc.", exch="NYQ", more...}, Object { symbol="^DJI", name="Dow Jones Industrial Average", exch="DJI", more...}, more objects...]

My JS file has this typeahead setup

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

With the console.log of both parsedReponse.data and dataset are both showing a valid array. but at the end it still always show the first result no matter what and the template is working like it should it seems, now in my HTML code I have the examples from Twitter running and it always show all results, but mine just 1..so why? If needed, I can also post my HTML code, I'm only trying to make the example, so the HTML is still simple

I also have a 2nd problem when it's showing that 1 result even if I click on it to choose it, nothing shows up in my input, though I would like to have the symbol value

Here is portion of my HTML code

<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>

解决方案

After couple days of working on this after working hours, I finally found it... I forgot 1 little thing that now answers my both problems. I had forgotten this little piece of code in my JS: valueKey: 'symbol' and voila!!! That is why I couldn't see anything in the input even after I selected the only row that was showing (my problem #2) and also why it was showing only 1 row of suggestion. Now for a cleaner code I came up with this:

$('.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 行数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！