Estoy usando esta función para obtener un JSON con datos para buscar. Ahora, tan pronto como alguien escribe las palabras clave, se muestra inmediatamente una lista de datos relativos. Me gustaría mostrar los resultados solo cuando se hace clic en el botón. Pero no puedo encontrar una manera.

 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); }); }; });

Y esta es la entrada de búsqueda:

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