API呼び出しから返されたJSONデータを使用してjquery auto suggestを作成する方法

Question

テキスト入力ボックスに3文字を入力しているときに、自動詰め込み機能を作成したいと考えています。 API呼び出しのJSONデータ結果から提案リストを取り込む必要があります。

私の入力テキストボックスのコードは以下の通りです：

<div><input id="trnnumname"></input></div> 

これは私のAPIのURLです：APIの呼び出しはJSONデータの形で完了した後に結果を与える

http://api.railwayapi.com/suggest_train/trains/190/apikey/1234567892/ 

。 URL には、その結果に基づく列車番号が表示され、列車番号は190 **から始まります。私は候補リストとして上記の結果を使用したい

{ 
"response_code": 200, 
"train": [ 
    "19005 (SAURASHTRA MAIL)", 
    "19006 (SAURASHTRA MAIL)", 
    "19011 (GUJARAT EXPRESS)", 
    "19012 (GUJARAT EXPRESS)", 
    "19017 (SAU JANATA EXP)", 
    "19018 (SAU JANATA EXP)", 
    "19019 (DEHRADUN EXP)", 
    "19020 (DEHRADUN EXP)", 
    "19021 (BDTS LJN EXPRES)", 
    "19022 (LJN BDTS EXP)", 
    "19023 (FZR JANATA EXP)", 
    "19024 (FZR BCT JANTA)", 
    "19027 (VIVEK EXPRESS)", 
    "19028 (VIVEK EXPRESS)", 
    "19029 (BDTS DEE EXPRES)", 
    "19030 (DEE BDTS EXP)", 
    "19031 (HARIDWAR MAIL)", 
    "19032 (YOGA EXPRESS)", 
    "19033 (GUJARAT QUEEN)", 
    "19034 (GUJARAT QUEEN)", 
    "19037 (AVADH EXPRESS)", 
    "19038 (AVADH EXPRESS)", 
    "19039 (AVADH EXPRESS)", 
    "19040 (AVADH EXPRESS)", 
    "19045 (TAPTI GANGA EXP)", 
    "19046 (TAPTI GANGA EXP)", 
    "19047 (ST BHAGALPUR EX)", 
    "19048 (BGP SURAT EXP)", 
    "19049 (BDTS PATNA EXP)", 
    "19050 (PNBE BDTS EXP)", 
    "19051 (SHRAMIK EXPRESS)", 
    "19052 (BL SHRAMIK EXP)", 
    "19053 (ST MFP EXPRESS)", 
    "19054 (MFP ST EXPRESS)", 
    "19055 (BL JODHPUR EXP)", 
    "19056 (JU BL EXPRESS)", 
    "19057 (UDN VARANASI EX)", 
    "19058 (BSB UDN EXP)", 
    "19059 (JAMNAGAR INTCIT)", 
    "19060 (SURAT INTERCITY)", 
    "19061 (RAMNAGAR EXPRES)", 
    "19062 (RMR BDTS EXP)", 
    "19063 (DANAPUR EXPRESS)", 
    "19064 (DNR UDHNA EXP)", 
    "19065 (BDTS BGKT EXP)", 
    "19066 (BGKT BDTS EXP)" 
], 
"total": 46 } 

：以下

は、JSONの結果です。私はJquery自動提案APIコードを使用しようとしましたが、正しく構成できませんでした。

Plsは、必要なすべてのライブラリを含む完全なコードを提供します。どんな助けも強いです。

私のコードは次のとおりです。

<script>$(function(){ $.getJSON('http://allorigins.pw/get?url=' + encodeURIComponent('http://api.railwayapi.com/suggest_train/trains/' + $('#trnnumname').value() + '/apikey/12345678/') + '&callback=?', function(data){varjdata = JSON.parse(data.contents);alert("1");varjdata1 = varjdata.train;});$("#trnnumname").autocomplete({source: varjdata1,minLength: 3,delay: 500});});</script> 

Answer 1

次のサンプルはあなたを助けることを願っています。 ajaxのURLは私のためには機能しませんでしたので、いくつかの作業があります。

Use this fiddle working sampl

HTML

<input type="text" placeholder="type something ..." id="suggest" />

JS

$(document).ready(function() { 
 

 
    $("#suggest").autocomplete({ 
 
    delay: 20, 
 
    source: function(request, response) { 
 
     // Suggest URL 
 
     //http://api.railwayapi.com/suggest_train/trains/190/apikey/1234567892/ 
 
     // The above url did not work for me so using some existing one 
 
     var suggestURL = "http://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY"; 
 
     suggestURL = suggestURL.replace('%QUERY', request.term); 
 

 
     // JSONP Request 
 
     $.ajax({ 
 
      method: 'GET', 
 
      dataType: 'jsonp', 
 
      jsonpCallback: 'jsonCallback', 
 
      url: suggestURL 
 
     }) 
 
     .success(function(data) { 
 
      response(data[1]); 
 
     }); 
 
    } 
 
    }); 
 
});

body { 
 
    padding: 10px; 
 
}

<input type="text" placeholder="type something ..." id="suggest" />

Answer 2

次のサンプルデータtから列車名を抽出するには彼は次のコードが役立つはずです。

var test_str = "1906122 (prakasEXPRES)"; 
var start_pos = test_str.indexOf('(') + 1; 
var end_pos = test_str.indexOf(')',start_pos); 
var text_to_get = test_str.substring(start_pos,end_pos) 
document.getElementById("demo").innerHTML = text_to_get ;