2

Typeahead.jsの新しいバージョンを結合しようとしており、例にあるような JSON ファイルからではなく、AJAX からプルする必要がある 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 成功応答内に typeahead を添付するとは思わないが、AJAX の例はあまり見ない (typeahead の以前のバージョンを除く)... Firebug の後に JSON 応答が表示される文字を入力しますが、入力はあまりうまく反応しません。どんなガイダンスも本当にありがたいです、私はこの時点で概念実証に取り組んでいます...私はAJAXを使用していることを知っておく価値があります.HTTPSにいて、Yahoo APIへの直接httpを使用しているため、安全でないページの Chrome と新しい Firefox の問題点。

アップデート

動作させるには、Hieu Nguyen のおかげで、AJAX JSON 応答を this から thisecho json_encode(['symbols' => $result]);にecho 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 に答える