2013-08-02 11 views
11

Sto provando a fare un esempio simile a quello mostrato da Twitter nella pagina degli esempi, in particolare quello con il modello Open Source Projects by Twitter e ho ottenuto qualcosa di parzialmente funzionante ma solo e mostra sempre solo 1 riga di risultati anche se ho impostato su 10, sto tracciando i dati di Yahoo Finance e il risultato è JSON ed è valido all'interno di Firebug, ad esempio la lettera di scrittura "a" creerà un oggetto JSON simile a: [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 con modello restituisce sempre solo 1 riga di dati

il mio file JS ha questa configurazione 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 
}); 

Con l'aria sole.log sia di parsedReponse.data sia di dataset mostrano entrambi un array valido. ma alla fine mostra sempre il primo risultato, non importa cosa e il modello funziona come dovrebbe, ora nel mio codice HTML ho gli esempi di Twitter in esecuzione e mostra sempre tutti i risultati, ma il mio solo 1 .. quindi perché? Se necessario, posso anche pubblicare il mio codice HTML, sto solo cercando di fare l'esempio, quindi l'HTML è ancora semplice

Ho anche un 2o problema quando sta mostrando che 1 risultato anche se clicco su per sceglierlo, niente rivela nel mio ingresso, anche se mi piacerebbe avere il valore di simbolo

Ecco parte del mio codice 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> 

risposta

27

dopo due giorni di lavoro su questo, dopo l'orario di lavoro, Alla fine l'ho trovato ... Ho dimenticato una piccola cosa che ora risponde ai miei due problemi. Avevo dimenticato questo piccolo pezzo di codice nel mio JS: valueKey: 'symbol' e voilà !!! Questo è il motivo per cui non sono riuscito a vedere nulla nell'input anche dopo aver selezionato l'unica riga che stava visualizzando (il mio problema n. 2) e anche perché mostrava solo una riga di suggerimenti. Ora per un codice più pulito sono arrivato fino a questo:

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

Bene che avete ottenuto risolto;) –

+1

Grazie, non ho visto che mi mancava questo pezzo perché non è necessario in una serie di stringhe, e da quando ho iniziato con gli archi e poi dopo gli oggetti, ho supervisionato questo pezzo ... – ghiscoding

+1

Grazie. È molto utile! – Dmitriy

Problemi correlati