SearXNG Changes

This revision is from 2025/10/25 02:10. You can Restore it.

  • Logo location: /usr/local/searxng/searxng-src/searx/static/themes/simple/img
  • sudo nemo and edit the file with graphics editor.



sudo chown searxng:searxng /usr/local/searxng/searxng-src/searx/static/themes/simple/img/searxng.png


sudo systemctl restart uwsgi

Change the css spacing: 0 out the margin in title in the css or in index.html in templates/simple add the margin



<div class="title" style="margin-bottom: -20px"><h1>SearXNG</h1></div>

Add category to the homepage

Take the code below from search.html and paste it into simple_search.html, inside the form. /searx/templates/simple_search.html:3

<div id="search_header">



  <div>


    {% set display_tooltip = true %}


    {% include 'simple/categories.html' %}


  </div>

<div id="search_view">

and it is essential to comment out line 16



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

and change the css spacing: 0 out the margin in title in the css or in index.html in templates/simple add the margin



<div class="index" style="margin-top: -40px">

Do not auto-execute the autocomplete dropdown combo box

Unintended execution, if the mouse selects the autocomplete option the combo box executes the search form. Disable the auto exection and make the user commit. This means that the selection is added to the imput box allowing further drop options.

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

Delete the line



//document.querySelector(`#search`)?.submit()

Trim left and right whitespace from queries

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

Before:



var u=document.querySelector(`#search`);t(u),e(`submit`,u,e=>{e.preventDefault();let t=document.querySelector(`#selected-categories`);t&&(t.value=l.filter(e=>e.classList.contains(`selected`)).map(e=>e.name.replace(`category_`,``)).join(`,`)),u.submit()});

After:



var u = document.querySelector('#search');


t(u);



e('submit', u, (event) => {


    event.preventDefault();



    // Trim leading and trailing spaces from search input


    const q = document.getElementById('q');


    if (q && q.value) {


        q.value = q.value.trim();


    }



    // Handle selected categories (existing logic)


    const selectedCategories = document.querySelector('#selected-categories');


    if (selectedCategories) {


        selectedCategories.value = l


            .filter((btn) => btn.classList.contains('selected'))


            .map((btn) => btn.name.replace('category_', ''))


            .join(',');


    }



    // Now safely submit the form


    u.submit();


});

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>

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>

/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>

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>

and



        document.addEventListener("DOMContentLoaded", function() {


            const searchInput = document.getElementById("q")


            if (searchInput) {


                searchInput.focus();


                const length = searchInput.value.length;


                searchInput.setSelectionRange(length, length);


            }


        });

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 -%}

  

📝 📜 ⏱️ ⬆️