---
# System prepended metadata

title: 問題

---

# 問題

- 下記のような検索フォームがあります
- `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;
    }
} 

```
