2

我正在尝试将新版本的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 的示例（除了先前版本的预输入）......我看到了 Firebug 之后的 JSON 响应输入一个字符，但输入的反应不是很好。任何指导都将不胜感激，我目前正在研究概念证明......同样值得知道我正在使用 AJAX，因为我使用的是 HTTPS，并且使用直接 http 访问 Yahoo API 是一种很好的方式Chrome 和新 Firefox 的不安全页面问题。

更新

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

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

1 回答 1

2

我必须反过来做，即：在 typeaheadremote处理程序中挂钩 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;
        }
    }
});

希望能帮助到你！

于 2013-07-31T11:08:40.330 回答