在 AJAX 中使用 Yahoo Finance 的 Twitter Typeahead.js

Question

我正在尝试将Typeahead.js 的新版本与需要从 AJAX 中提取的 JSON 结合使用，而不是像他们在示例中那样从 JSON 文件中提取。我只是无法让它工作，我不想缓存 JSON 结果或任何东西，我想从 Yahoo 实时提取它。

我的 HTML 输入是 <input type="text" id="symbol" name="symbol" autofocus autocomplete="off" placeholder="Symbol" onkeyup="onSymbolChange(this.value)" />

我的 AJAX/PHP 文件有这个来检索数据（这部分工作，我用 Firebug 测试过）

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&query=$symbolChar");

    // parse yahoo data into a list of symbols
    $result = [];
    $json = json_decode(substr($data, strlen('YAHOO.util.ScriptNodeDataSource.callbacks('), -1));

    foreach ($json->ResultSet->Result as $stock) {
        $result[] = '('.$stock->symbol.') '.$stock->name;
    }

    echo json_encode(['symbols' => $result]);
}

JS 文件（这是我苦苦挣扎的地方）

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
            });
        }
    });
}

我不认为我应该在 AJAX 成功响应中附加一个预输入，但是我没有看到太多关于 AJAX 的示例（除了先前版本的预输入）...我看到了 JSON 响应输入字符后使用 Firebug，但输入反应不佳。任何指导都将不胜感激，我目前正在做一个概念证明......同样值得知道我正在使用 AJAX，因为我在 HTTPS 中，并且使用直接 http 到 Yahoo API 提供了各种帮助Chrome 和新 Firefox 的不安全页面问题。

更新

为了让它工作，感谢 Hieu Nguyen，我不得不将 AJAX JSON 响应从 echo json_encode(['symbols' => $result]); 修改为 echo json_encode($result);，并修改 JS 文件以使用此处建议的代码：

$('#symbol').typeahead({
    name: 'symbol',
    remote: 'yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY'
});

Answer 1

我必须反过来做，即：在 typeahead remote 处理程序中挂钩 ajax 调用。你可以试试：

$('#symbol').typeahead({
    name: 'symbol',
    remote: '/yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY'
});

您不必创建 onSymbolChange() 函数，因为 typeahead 已经处理好了。

您还可以使用以下方法过滤和调试来自后端的响应：

$('#symbol').typeahead({
    name: 'symbol',
    remote: {
        url: '/yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY',
        filter: function(resp) {
            var dataset = [];
            console.log(resp); // debug the response here

            // do some filtering if needed with the response          

            return dataset;
        }
    }
});

希望对你有帮助！