2013-08-02 7 views
11

私は、例のページで、具体的にはOpen Source Projects by 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...}, more objects...]Twitterテンプレートを持つTypeaheadは常に1行のデータしか返しません

私の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.datadatasetの両方のsole.logは両方とも有効な配列を示しています。しかし、最終的には何があってもテンプレートは常に最初の結果を表示しているように見えるはずです。私のHTMLコードではTwitterの実行例があり、常にすべての結果が表示されますが、なぜ?必要に応じてHTMLコードを投稿することもできますが、例を作成しようとしているだけなので、HTMLは依然として単純です。

2番目の問題私はクリックしても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> 

答えて

27

の一部は、勤務時間後にこれに取り組んでのカップル日後です、私はついにそれを見つけました...私は両方の問題に答える1つの小さなことを忘れました。私はJSのコードのこの小さな部分を忘れていた:valueKey: 'symbol'とvoila !!!だから、私が表示していた唯一の行(私の問題#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 
}); 
+0

あなたはそれを解決し得たことを良い、それは文字列の配列には必要はありませんので –

+1

おかげで、私はこの作品を欠けていたことがわかりませんでした)、および私は弦で始まり、オブジェクトの後に始まったので、私はこの作品を監督しました... – ghiscoding

+1

ありがとうございました。非常に役立ちます! – Dmitriy

関連する問題