Add HTML5 tag required

/searx/templates/search.html and /searx/templates/simple_search.html

     

<input id="q" name="q" type="text" placeholder="{{ _('Search for...') }}" autocomplete="off" autocapitalize="none" spellcheck="false" autocorrect="off" dir="auto" value="{{ q or '' }}" required>
Copy

Adding the required tag will also add a input box hover tooltip. In google, pushing the search button with no query gives trending topics.

Disable search button while no query or input box is empty

<style>
#send_search:disabled,
.category_button:disabled {
  pointer-events: none;
  opacity: 0.5; /* Optionally, to visually indicate the disabled state */
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById('q');
  const searchButton = document.getElementById('send_search');
  const clearButton = document.getElementById('clear_search');
  const form = document.getElementById('search');
  const categoryButtons = document.querySelectorAll('.category_button');

  // Function to toggle the search button state
  function toggleSearchButton() {
    const isInputEmpty = searchInput.value.trim() === '';
    searchButton.disabled = isInputEmpty;
    toggleCategoryButtons(isInputEmpty);
  }

  // Function to toggle the state of all category buttons
  function toggleCategoryButtons(isDisabled) {
    categoryButtons.forEach(button => {
      button.disabled = isDisabled;
    });
  }

  // Add input event listener to toggle the search and category buttons
  searchInput.addEventListener('input', toggleSearchButton);

  // Add click event listener to the clear button
  clearButton.addEventListener('click', function() {
    // Clear the input
    searchInput.value = '';
    // Disable the search and category buttons
    toggleSearchButton();
  });

  // Add reset event listener to the form
  form.addEventListener('reset', function() {
    // Delay to allow the reset to complete
    setTimeout(toggleSearchButton, 0);
  });

  // Initial check in case there's a pre-filled value
  toggleSearchButton();
});
</script>
Copy