Databases
StackOverflow2013
Postsdbo
POTwitter Typeahead.js with Yahoo Finance in AJAX
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTwitter Typeahead.js with Yahoo Finance in AJAX
    text
    copied!<p>I am trying to couple the new version of <a href="http://twitter.github.io/typeahead.js/examples/" rel="nofollow">Typeahead.js</a> and using it with JSON that needs to be pulled from AJAX and not from a JSON file like they have in their examples. I just can't get it to work, I don't want to cache the JSON result or anything, I want to pull it live from Yahoo.</p> <p>My HTML input is <code>&lt;input type="text" id="symbol" name="symbol" autofocus autocomplete="off" placeholder="Symbol" onkeyup="onSymbolChange(this.value)" /&gt;</code></p> <p>My AJAX/PHP file has this to retrieve data (this part work, I tested it with Firebug)</p> <pre class="lang-php prettyprint-override"><code>header('Content-type:text/html; charset=UTF-8;'); $action = (isset($_GET['action'])) ? $_GET['action'] : null; $symbol = (isset($_GET['symbol'])) ? $_GET['symbol'] : null; switch($action) { case 'autocjson': getYahooSymbolAutoComplete($symbol); break; } function getYahooSymbolAutoCompleteJson($symbolChar) { $data = @file_get_contents("http://d.yimg.com/aq/autoc?callback=YAHOO.util.ScriptNodeDataSource.callbacks&amp;query=$symbolChar"); // parse yahoo data into a list of symbols $result = []; $json = json_decode(substr($data, strlen('YAHOO.util.ScriptNodeDataSource.callbacks('), -1)); foreach ($json-&gt;ResultSet-&gt;Result as $stock) { $result[] = '('.$stock-&gt;symbol.') '.$stock-&gt;name; } echo json_encode(['symbols' =&gt; $result]); } </code></pre> <p>The JS file (this is where I'm struggling)</p> <pre class="lang-js prettyprint-override"><code>function onSymbolChange(symbolChar) { $.ajax({ url: 'yahoo_autocomplete_ajax.php', type: 'GET', dataType: 'json', data: { action: 'autocjson', symbol: symbolChar }, success: function(response) { $('#symbol').typeahead({ name: 'symbol', remote: response.symbols }); } }); } </code></pre> <p>I don't think that I'm suppose to attach a typeahead inside an AJAX success response, but I don't see much examples with AJAX (except for a previous version of typeahead)... I see the JSON response with Firebug after typing a character but the input doesn't react so good. Any guidance would really be appreciated, I'm working on a proof of concept at this point... It's also worth to know that I'm using AJAX because I am in HTTPS and using a direct http to Yahoo API is giving all kind of problems with Chrome and new Firefox for insecure page.</p> <p><b>UPDATE</b></p> <p>To make it to work, thanks to Hieu Nguyen, I had to modify the AJAX JSON response from this <code>echo json_encode(['symbols' =&gt; $result]);</code> to instead this <code>echo json_encode($result);</code> and modify the JS file to use the code as suggested here:</p> <pre class="lang-js prettyprint-override"><code>$('#symbol').typeahead({ name: 'symbol', remote: 'yahoo_autocomplete_ajax.php?action=autocjson&amp;symbol=%QUERY' }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload