---
# System prepended metadata

title: Untitled

---

問題
* 下記のような検索フォームがあります
* input に検索ワードを入力して button を押すと API にリクエストを送ります
    * 送信の形式は https://api.example.com/search?q=〇〇 とします
* サーバーからは下記のような JSON が返ってくるのでその内容をdivに展開します
    * { id: number, title: string }[] とします
    * 一覧の各要素には title が表示されます
* クエリが空の時は何も返ってきません
* サーバーはとても貧弱です、極力サーバーに優しくなるよう処理を書いてください
* CSSに関しては一切考慮しなくてよいです
+-----------+  +--------+
| input     |  | button |
+-----------+  +--------+
+-----------------------+
| div                   |
+-----------------------+


備考
* 表示には何のライブラリを使っても良いものとします（ jQuery、React、Vue、Angular、生 JS ）。
* Ajax リクエストにも何を使っても良いものとします（ axios、$.ajax、fetch、生 XHR ）
* メソッド名は多少間違っててもいいですし、設問者に聞いて教えてもらって構いません。
* input や button の class や id は適当に補って構いません


const generateHTML = async () => {
    try {
        const qInput = document.getElementById('inputのid');
        const res = await axios.get('https://api.example.com/search', {
            query: {
                q: q.innerHTML,
            },
        });
        if (res.status !== 200) throw new Error();
        const data = res.data;
        const titles = data.map(d => d.title);
        if (titles.length === 0) throw new Error();
        return '
            <div>
                <ul>
                    titles.map(title => <li key=title>{title}</li>);
                </ul>
            </div>
        ';
    } catch (e) {
        return '<div>Error</div>';
    }
};

const bt = document.getElementById('buttonのid');

// div は <div isFetching=false > みたいな感じで持っているとして

const displayTitles = () => {
    const isFetching = bt.getAttribute('isFetching');
    if !(isFetching) {
        generateHTML().then(html => {
            bt.innerHTML = html;
            bt.setAttribute('isFetching', false);
        });
    }
};

bt.addEventListener(displayTitles());