Twitter Typeahead.js와 AJAX의 Yahoo Finance

Question

나는 Typeahead.js의 새 버전을 연결하고 JSON 파일을 AJAX에서 가져와야하고 JSON 파일에서 가져와야하는 예제와 같이 사용하려고합니다. 난 그냥 작동시키지 못한다. JSON 결과 나 다른 것을 캐시하고 싶지 않다. 야후에서 생방송으로 만들고 싶다.

내 HTML 입력이 데이터를 검색 할 수있다 <input type="text" id="symbol" name="symbol" autofocus autocomplete="off" placeholder="Symbol" onkeyup="onSymbolChange(this.value)" />

내 AJAX/PHP 파일 인 I '는 곳이다 (

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 파일 (이 부분은 작업, I 방화범로 시험) m 고투)

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의 성공 응답 내부 선행 입력을 첨부한다고 가정 해요 생각하지 않습니다,하지만 난 이전 versi를 제외하고 (AJAX와 많은 예를 볼 수 없습니다 선입관 중) ... 문자를 입력 한 후 방화 벽이있는 JSON 응답을 볼 수 있지만 입력이 너무 좋게 반응하지 않습니다. 모든 지침은 정말로 감사 할 것입니다. 저는이 시점에서 개념 증명을하고 있습니다 ... HTTPS에 있기 때문에 AJAX를 사용하고 있고 Yahoo API에 직접 http를 사용하고 있기 때문에 모든 종류의 정보를 제공하고 있습니다. 안전하지 않은 페이지에 대한 Chrome 및 Firefox의 새로운 문제 여기에 제안

UPDATE

것은, 그것이 작동하는 Hieu 구엔 덕분하려면, 내가 대신이 echo json_encode($result); 및 코드를 사용하는 JS 파일을 수정하려면이 echo json_encode(['symbols' => $result]);에서 AJAX JSON 응답을 수정했다 :

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

Answer 1

나는, 반대로 즉, 그것을해야 할 : 선행 입력 remote 핸들러 내부에 아약스 전화를 걸이. 당신은 시도 할 수 있습니다 : 당신은 onSymbolChange() 기능을 만들 필요가 없습니다

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

선행 입력이 이미 알아서하기 때문에.

는 또한 필터링을 사용하여 백엔드의 응답을 디버깅 할 수 있습니다 :

$('#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; 
     } 
    } 
}); 

는 희망이 도움이!