I'm using this function to fetch a JSON with data to be searched. Now, as soon as someone type the keywords a list of relative data is immediately shown. I'd like to show the results only when button is clicked. But I cannot find a way.

document.addEventListener('DOMContentLoaded', function(event) {
  const search = document.getElementById('search');
  const results = document.getElementById('results');
  let data = [];
  let search_term = '';

  fetch('/search.json')
    .then(response => response.json())
    .then(data_server => {
      data = data_server;
    });

  search.addEventListener('input', event => {
    search_term = event.target.value.toLowerCase();
    showList();
  });

  const showList = () => {
    results.innerHTML = '';
    if (search_term.length <= 0) return;
    const match = new RegExp(`${search_term}`, 'gi');
    let result = data.filter(name => match.test(name.title) || match.test(name.meta_description) || match.test(name.tags));
    if (result.length == 0) {
      const li = document.createElement('li');
      li.innerHTML = `No results found`;
      results.appendChild(li);
    }
    result.forEach(e => {
      const li = document.createElement('li');
      li.innerHTML = `<a href="${e.url}">${e.title}</a><br>${e.meta_description}`;
      results.appendChild(li);
    });
  };
});

And this is the search input:

            <input autocomplete="off" type="search" id="search" placeholder="Search">
            <button type="submit">Search</button>
            <ul id="results"></ul>