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

/searx/static/themes/simple/css/searxng.min.css

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

/searx/static/themes/simple/js/searxng.min.js

<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

Bug Fix (x does not appear when using mouse only)

/searx/static/themes/simple/js/searxng.min.js

function a(t){
    var e=document.getElementById("clear_search");
    var n=function(){
        if(t.value.length===0){
            e.classList.add("empty")
        }else{
            e.classList.remove("empty")
        }
    };
    n();
    e.addEventListener("click",function(e){
        t.value="";
        t.focus();
        n();
        e.preventDefault()
    });
    t.addEventListener("keyup",n,false); // Replace this line
    t.addEventListener("input",n,false); // with this line to handle paste events
}
Copy

Trim left and right whitespace from queries

/searx/static/themes/simple/js/searxng.min.js

document.addEventListener('DOMContentLoaded', (event) => {
    const searchForm = document.getElementById('search');
    const searchInput = document.getElementById('q');

    searchForm.addEventListener('submit', (event) => {
        const trimmedValue = searchInput.value.trim();
        searchInput.value = trimmedValue;
    });
});
Copy

Do not auto-execute the autocomplete dropdown combo box

Unintended execution, if the mouse selects the autocomplete option the combo box executes. The single way to select the autocomplate is the treat it like a select box. Disable the auto exection and make the user commit.

/searx/static/themes/simple/js/searxng.min.js

// t.submit() // disable the submission of combo box
Copy

The auto-complete now keeps guessing and reworking the prompt.

Set the cursor on the input box (autofocus)

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

and

        document.addEventListener("DOMContentLoaded", function() {
            const searchInput = 
            if (searchInput) {
                searchInput.focus();
                const length = searchInput.value.length;
                searchInput.setSelectionRange(length, length);
            }
        });
Copy

Autofocus is not supported by some browsers, sometimes it is there correctly.