只使用javascript和html为json API创建搜索栏？

<form id="search-form">
  <input type="text" id="search-input" placeholder="输入搜索关键字">
  <button type="submit" id="search-button">搜索</button>
</form>

const form = document.getElementById('search-form');
const input = document.getElementById('search-input');
const apiUrl = 'https://api.example.com/search?keyword=';

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  const keyword = input.value.trim();
  if (keyword !== '') {
    const url = apiUrl + encodeURIComponent(keyword);

    fetch(url)
      .then(response => response.json())
      .then(data => {
        // 处理API响应数据
        // 将结果显示在页面上
      })
      .catch(error => {
        // 处理错误
      });
  }
});