SearXNG Changes

New name   B I U S link image code HTML list	Show page  Syntax
!!!Add HTML5 tag required /searx/templates/search.html and /searx/templates/simple_search.html {pre} <input id="q" name="q" type="text" placeholder="{{ _('Search for...') }}" autocomplete="off" autocapitalize="none" spellcheck="false" autocorrect="off" dir="auto" value="{{ q or '' }}" required> {/pre} 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 {pre} <style> #send_search:disabled, .category_button:disabled { pointer-events: none; opacity: 0.5; /* Optionally, to visually indicate the disabled state */ } </style> {/pre} /searx/static/themes/simple/js/searxng.min.js {pre} <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> {/pre} !!!Bug Fix (x does not appear when using mouse only) /searx/static/themes/simple/js/searxng.min.js {pre} 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 } {/pre} !!!Trim left and right whitespace from queries /searx/static/themes/simple/js/searxng.min.js {pre} 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; }); }); {/pre} !!!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 {pre} // t.submit() // disable the submission of combo box {/pre} The auto-complete now keeps guessing and reworking the prompt. !!!Set the cursor on the input box (autofocus) {pre} <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> {/pre} and {pre} document.addEventListener("DOMContentLoaded", function() { const searchInput = document.getElementById("q") if (searchInput) { searchInput.focus(); const length = searchInput.value.length; searchInput.setSelectionRange(length, length); } }); {/pre} 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 {pre} <div> {% set display_tooltip = true %} {% include 'simple/categories.html' %} </div> {/pre} It is essential to comment out line 16 {pre} <!-- <input type="hidden" name="category_{{ category }}" value="1" > --> {/pre} !!! 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 {pre} <!-- // `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 -%} {/pre}
Password  Summary of changes

 📜 ⏱️ ⬆️