# 問題 - 下記のような検索フォームがあります - `input` に検索ワードを入力して `button` を押すと API にリクエストを送ります - 送信の形式は `https://api.example.com/search?q=〇〇` とします - サーバーからは下記のような JSON が返ってくるのでその内容をdivに展開します - `{ id: number, title: string }[]` とします - 一覧の各要素には `title` が表示されます - クエリが空の時は何も返ってきません - サーバーはとても貧弱です、極力サーバーに優しくなるよう処理を書いてください - CSSに関しては一切考慮しなくてよいです ``` +-----------+ +--------+ | input | | button | +-----------+ +--------+ +-----------------------+ | div | +-----------------------+ ``` [ { "id": 1, "title": "タイトル" }, { "id": 2, "title": "タイ" }, { "id": 3, "title": "ムエタイ" } ] # 備考 - 表示には何のライブラリを使っても良いものとします（ jQuery、React、Vue、Angular、生 JS ）。 - Ajax リクエストにも何を使っても良いものとします（ axios、$.ajax、fetch、生 XHR ） - メソッド名は多少間違っててもいいですし、設問者に聞いて教えてもらって構いません。 - `input` や `button` の `class` や `id` は適当に補って構いません ```htmlmixed= <html> <input id='form'> <button id='click' onclick={clickEvent}>button </button> <div id='display'> <div > タイトル </div> <div> タイ </div> </div> </html> ``` ```javascript= let form=document.getElementById('form'); let display=document.getElementById('display'); let sendUrl="https://api.example.com/search?q="+form; let json; function clickEvent(){ Promise json=axios.get(sendUrl, { }); for.each(json:el){ let div=document.createElement('div'); display.appendchild('div'); div.innertext=el; } } ```