銀行名、銀行コード、支店名、支店コード

https://bankcode-api.appspot.com/api/bank/JP?name=

apiを使って、フォームに入力された銀行名をキーに、
検索結果を表示させて、その情報を取得したいのですが、
https://bank-auto.com/のようなものを作りたいのですが、
ソースコードが分からず困っております。

html,javascriptで実現したいです。

以下、追記です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
⓵銀行名を入力し検索ボタン押下したら、銀行コードが出てきてほしいのですが出てきません。
銀行コードと支店コードはユーザ側でいじれないようにしています。
HTMLのテキストボックスに、結果を表示させたいのですが、うまくできません。
エラーは明示的に表示されません。

⓶できれば、銀行目に’みず’と打ったら、
候補となる銀行名（みずほ銀行、みずほ信託など）が出てきて選択できると嬉しいです。
jQueryで実現可能でしょうか？

⓷みずほ銀行と入れると、銀行の検索文字が原因で、検索がかからないようですがAPIの仕様でしょうか？ユーザからすれば、銀行名を入力する際、みずほではなく、みずほ銀行と打ち込みされてしまいそうで、困っています。

⓸銀行コードで、支店名を絞り込みした検索は技術的に可能なのでしょうか？
例えば、みずほ銀行の支店名だけ、支店名候補に出てくると助かります。

⓹できれば、検索ボタンを押さなくても、銀行名と支店名が選択できればよいと思っています。
技術的に難しいでしょうか？

●JavaScript
$('btn').on('click', function() {
// 入力された銀行名でWebAPIに情報をリクエスト
$.ajax({
url:https://bankcode-api.appspot.com/api/bank/JP?name=${encodeURIComponent( $('#bankName').val() )},
dataType:'jsonp',
}).done(function(data) {
console.log(data);
//$('bankCode').val(data[0]);
});

});

●HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h3>銀行検索</h3> <div> <p> <label>銀行名<input id="bankName" type="text" size="10" maxlength="8"></label> <button id="btn">検索</button> </p> <p><label>銀行コード <input id="bankCode" type="text" size="10" disabled></label></p> <p><label>支店名 <input id="branchName" type="text" size="10"></label></p> <p><label>支店コード<input id="branchCd" type="text" size="10" disabled></label></p> </div> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/java.js"></script> </body> </html>

NEO_PLANETT-777

2020/01/26 23:18

丸投げは駄目ですよせめて今ここまで作成してます。この部分が不明ですって感じで質問しないと…

m.ts10806

2020/01/26 23:48

>apiを使って、フォームに入力された銀行名をキーに、検索結果を表示させて、その情報を取得するコードを作ったら良いのでは　というアドバイスならできますよ。 APIであれば仕様書があるはず。使い方の説明もある。なんならそこにサンプルコードもあるのでは？それを参考に自分で組んでみてください。

Lhankor_Mhy

2020/01/29 00:23

「うまくできません」とは具体的には何が起きていますか？エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1

sansam

2020/01/29 12:02

ご指摘ありがとうございます。質問を修正いたしました。ご教示いただけますと幸いです。

m.ts10806

2020/01/29 21:44

コードはマークダウンのcode機能を利用してご提示ください https://teratail.com/help#about-markdown

行動規範の内容に同意します

回答1件

> html,javascriptで実現したいです。

~~試してみましたが、クロスオリジン制限がありましたので、サーバ側からリクエストしないと無理だと思います。html,javascriptでは実現しないと思っておいた方が無難です。
~~

訂正

すみません、JSONPが使える様でしたので、サンプルコードを挙げます。
サンプル

js
1const jsonp = async function(s, callback='callback'){
2  return new Promise(function(resolve){
3    window[callback] = json=>resolve(json);
4    const script = document.createElement('script');
5    script.src = `${s}&callback=${callback}`;
6    document.head.appendChild(script);
7  })
8};
9
10const $id = document.getElementById.bind(document);
11    
12$id('search').addEventListener('click', async e=>{
13  const div = document.createElement('div');
14  document.body.appendChild(div);
15  div.innerText = JSON.stringify( await jsonp( `https://bankcode-api.appspot.com/api/bank/JP?name=${encodeURIComponent($id('q').value)}` ) );
16});

html
1<input id="q" value="三">
2<input type="button" id="search" value="search">

　
一応、jQueryを使った例も挙げておきます。
サンプル

js
1$('#search').on('click',async e=>{
2  const div = $('<div>');
3  $('body').append(div);
4  div.text( JSON.stringify( await $.ajax({
5    url:`https://bankcode-api.appspot.com/api/bank/JP?name=${encodeURIComponent( $('#q').val() )}`,
6    dataType:'jsonp'
7  }) ) );
8});

　
ES5の範囲だとこんな感じでしょうか？
サンプル

js
1$('#search').on('click', function(e){
2  var div = $('<div>');
3  $('body').append(div);
4  $.ajax({
5    url:'https://bankcode-api.appspot.com/api/bank/JP?name=' + encodeURIComponent( $('#q').val() ),
6    dataType:'jsonp'
7  }).then(function(json){
8    div.text( JSON.stringify( json ) );
9  });
10});