change the footer links

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

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

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 = document.getElementById("q")
            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.

Add a favicon to the search results

templates/simple/macros.html

<!--
//        `https://icons.duckduckgo.com/ip3/${host}.ico`
//        'https://www.google.com/s2/favicons?domain=' plus host
//        'https://api.statvoo.com/favicon/' plus host
→

{% macro result_header(result, favicons, image_proxify) -%}
<article class="result {% if result['template'] %}result-{{ result.template|replace('.html', '') }}{% else %}result-default{% endif %} {% if result['category'] %}category-{{ result['category'] }}{% endif %}{% for e in result.engines %} {{ e }}{% endfor %}">
  <p class="result_url" style="display: flex; align-items: center;">
    <img src="https://www.google.com/s2/favicons?domain={{ result.parsed_url.netloc }}" alt="favicon" class="favicon" style="margin-right: 5px; vertical-align: middle; width: 24px; height: 24px;">
    {{ result_open_link(result.url, "url_wrapper") }}
    {%- for part in get_pretty_url(result.parsed_url) -%}
    <span class="url_o{{loop.index}}"><span class="url_i{{loop.index}}">{{- part -}}</span></span>
    {%- endfor %}
    {{ result_close_link() }}
  </p>
  {%- if result.thumbnail %}{{ result_open_link(result.url) }}<img class="thumbnail" src="{{ image_proxify(result.thumbnail) }}" title="{{ result.title|striptags }}" loading="lazy">{{ result_close_link() }}{% endif -%}
  <h3>{{ result_link(result.url, result.title|safe) }}</h3>
{%- endmacro -%}
Copy