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 = 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.

Executing caetgory searches from the homepage

Take the code below from search.html and paste it into simple_search.html

/searx/templates/simple_search.html:3

  <div>
    {% set display_tooltip = true %}
    {% include 'simple/categories.html' %}
  </div>
Copy

It is essential to comment out line 16

 <!-- <input type="hidden" name="category_{{ category }}" value="1" > →
Copy

Change the logo, change the footer links

It is customary to leave to logo: /searx/static/themes/simple/img/

0 out the margin in title in the css

and hack <div class="index" style="margin-top: -40px"> in index.html in templates/simple

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