問題
* 下記のような検索フォームがあります
* 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());