searchsuggestions.html

<input type="search" id="search-input" placeholder="Search tools...">
<ul id="suggestions"></ul>

<script>
  const searchInput = document.getElementById('search-input');
  const suggestionsList = document.getElementById('suggestions');

  const suggestions = ['GitHub', 'VS Code', 'Trello', 'Debuggy', 'RescueTime', 'OWASP ZAP'];

  searchInput.addEventListener('input', () => {
    const value = searchInput.value.toLowerCase();
    suggestionsList.innerHTML = '';
    const filteredSuggestions = suggestions.filter(suggestion => suggestion.toLowerCase().includes(value));
    filteredSuggestions.forEach(suggestion => {
      const li = document.createElement('li');
      li.textContent = suggestion;
      suggestionsList.appendChild(li);
    });
  });
</script>

<style>
  #suggestions {
    list-style: none;
    padding: 0;
    position: absolute;
    background-color: white;
    width: 100%;
    max-width: 600px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  }

  #suggestions li {
    padding: 10px;
    cursor: pointer;
  }

  #suggestions li:hover {
    background-color: #f0f2f5;
  }
</style>