SearXNG Changes
This revision is from 2024/08/12 10:16. You can Restore it.
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>
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
}
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;
});
});
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
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>
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.
Executing caetgory searches from the homepage
/searx/templates/simple_search.html:3
<div>
{% set display_tooltip = true %}
{% include 'simple/categories.html' %}
</div>