jandieman/searxng
2
0
Fork 0
mirror of https://github.com/searxng/searxng.git synced 2025-12-23 04:00:02 +00:00
Code Issues Projects Releases Wiki Activity

[refactor] search.js: use custom auto completion implementation

Browse Source 
The previously used library is unmaintained for 6 years now [1] and the solution
had know issues [2][3]

[1] https://github.com/searxng/searxng/pull/4284#discussion_r1954493434
[2] https://github.com/searxng/searxng/pull/4318#issuecomment-2731576657
[3] https://github.com/privau/searxng/issues/56
This commit is contained in:
Bnyro
2025-03-17 20:19:13 +01:00
parent 156d1eb8c8
commit 32823ecb69
7 changed files with 100 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
client/simple/src/js/main/search.js
View File

@@ -1,8 +1,6 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* exported AutoComplete */
import AutoComplete from "../../../node_modules/autocomplete-js/dist/autocomplete.js";
(function (w, d, searxng) {
'use strict';
@@ -38,8 +36,62 @@ import AutoComplete from "../../../node_modules/autocomplete-js/dist/autocomple
qinput.addEventListener('input', updateClearButton, false);
}
const fetchResults = async (query) => {
let request;
if (searxng.settings.method === 'GET') {
const reqParams = new URLSearchParams();
reqParams.append("q", query);
request = fetch("./autocompleter?" + reqParams.toString());
} else {
const formData = new FormData();
formData.append("q", query);
request = fetch("./autocompleter", {
method: 'POST',
body: formData,
});
}
request.then(async function (response) {
const results = await response.json();
if (!results) return;
const autocomplete = d.querySelector(".autocomplete");
const autocompleteList = d.querySelector(".autocomplete ul");
autocomplete.classList.add("open");
autocompleteList.innerHTML = "";
// show an error message that no result was found
if (!results[1] || results[1].length == 0) {
const noItemFoundMessage = document.createElement("li");
noItemFoundMessage.classList.add('no-item-found');
noItemFoundMessage.innerHTML = searxng.settings.translations.no_item_found;
autocompleteList.appendChild(noItemFoundMessage);
return;
}
for (let result of results[1]) {
const li = document.createElement("li");
li.innerText = result;
searxng.on(li, 'mousedown', () => {
qinput.value = result;
const form = d.querySelector("#search");
form.submit();
autocomplete.classList.remove('open');
});
autocompleteList.appendChild(li);
}
});
};
searxng.ready(function () {
// focus search input on large screens
if (!isMobile) document.getElementById("q").focus();
qinput = d.getElementById(qinput_id);
const autocomplete = d.querySelector(".autocomplete");
const autocompleteList = d.querySelector(".autocomplete ul");
if (qinput !== null) {
// clear button
@@ -47,109 +99,45 @@ import AutoComplete from "../../../node_modules/autocomplete-js/dist/autocomple
// autocompleter
if (searxng.settings.autocomplete) {
searxng.autocomplete = AutoComplete.call(w, {
Url: "./autocompleter",
EmptyMessage: searxng.settings.translations.no_item_found,
HttpMethod: searxng.settings.method,
HttpHeaders: {
"Content-type": "application/x-www-form-urlencoded",
"X-Requested-With": "XMLHttpRequest"
},
MinChars: searxng.settings.autocomplete_min,
Delay: 300,
_Position: function () {},
_Open: function () {
var params = this;
Array.prototype.forEach.call(this.DOMResults.getElementsByTagName("li"), function (li) {
if (li.getAttribute("class") != "locked") {
li.onmousedown = function () {
params._Select(li);
};
}
});
},
_Select: function (item) {
AutoComplete.defaults._Select.call(this, item);
var form = item.closest('form');
if (form) {
form.submit();
searxng.on(qinput, 'input', () => {
const query = qinput.value;
if (query.length < searxng.settings.autocomplete_min) return;
setTimeout(() => {
if (query == qinput.value) fetchResults(query);
}, 300);
});
searxng.on(qinput, 'keyup', (e) => {
let currentIndex = -1;
const listItems = autocompleteList.children;
for (let i = 0; i < listItems.length; i++) {
if (listItems[i].classList.contains('active')) {
currentIndex = i;
break;
}
},
_MinChars: function () {
if (this.Input.value.indexOf('!') > -1) {
return 0;
} else {
return AutoComplete.defaults._MinChars.call(this);
}
},
KeyboardMappings: Object.assign({}, AutoComplete.defaults.KeyboardMappings, {
"KeyUpAndDown_up": Object.assign({}, AutoComplete.defaults.KeyboardMappings.KeyUpAndDown_up, {
Callback: function (event) {
AutoComplete.defaults.KeyboardMappings.KeyUpAndDown_up.Callback.call(this, event);
var liActive = this.DOMResults.querySelector("li.active");
if (liActive) {
AutoComplete.defaults._Select.call(this, liActive);
}
},
}),
"Tab": Object.assign({}, AutoComplete.defaults.KeyboardMappings.Enter, {
Conditions: [{
Is: 9,
Not: false
}],
Callback: function (event) {
if (this.DOMResults.getAttribute("class").indexOf("open") != -1) {
var liActive = this.DOMResults.querySelector("li.active");
if (liActive !== null) {
AutoComplete.defaults._Select.call(this, liActive);
event.preventDefault();
}
}
},
})
}),
}, "#" + qinput_id);
}
/*
Monkey patch autocomplete.js to fix a bug
With the POST method, the values are not URL encoded: query like "1 + 1" are sent as "1 1" since space are URL encoded as plus.
See HTML specifications:
* HTML5: https://url.spec.whatwg.org/#concept-urlencoded-serializer
* HTML4: https://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1
autocomplete.js does not URL encode the name and values:
https://github.com/autocompletejs/autocomplete.js/blob/87069524f3b95e68f1b54d8976868e0eac1b2c83/src/autocomplete.ts#L665
The monkey patch overrides the compiled version of the ajax function.
See https://github.com/autocompletejs/autocomplete.js/blob/87069524f3b95e68f1b54d8976868e0eac1b2c83/dist/autocomplete.js#L143-L158
The patch changes only the line 156 from
params.Request.send(params._QueryArg() + "=" + params._Pre());
to
params.Request.send(encodeURIComponent(params._QueryArg()) + "=" + encodeURIComponent(params._Pre()));
Related to:
* https://github.com/autocompletejs/autocomplete.js/issues/78
* https://github.com/searxng/searxng/issues/1695
*/
AutoComplete.prototype.ajax = function (params, request, timeout) {
if (timeout === void 0) { timeout = true; }
if (params.$AjaxTimer) {
window.clearTimeout(params.$AjaxTimer);
}
if (timeout === true) {
params.$AjaxTimer = window.setTimeout(AutoComplete.prototype.ajax.bind(null, params, request, false), params.Delay);
} else {
if (params.Request) {
params.Request.abort();
}
params.Request = request;
params.Request.send(encodeURIComponent(params._QueryArg()) + "=" + encodeURIComponent(params._Pre()));
}
};
if (!isMobile && document.querySelector('.index_endpoint')) {
qinput.focus();
let newCurrentIndex = -1;
if (e.key === "ArrowUp") {
if (currentIndex >= 0) listItems[currentIndex].classList.remove('active');
// we need to add listItems.length to the index calculation here because the JavaScript modulos
// operator doesn't work with negative numbers
newCurrentIndex = (currentIndex - 1 + listItems.length) % listItems.length;
} else if (e.key === "ArrowDown") {
if (currentIndex >= 0) listItems[currentIndex].classList.remove('active');
newCurrentIndex = (currentIndex + 1) % listItems.length;
} else if (e.key === "Tab" || e.key === "Enter") {
autocomplete.classList.remove('open');
}
if (newCurrentIndex != -1) {
const selectedItem = listItems[newCurrentIndex];
selectedItem.classList.add('active');
if (!selectedItem.classList.contains('no-item-found')) qinput.value = selectedItem.innerText;
}
});
}
}
@@ -184,7 +172,7 @@ import AutoComplete from "../../../node_modules/autocomplete-js/dist/autocomple
categoryButton.classList.remove("selected");
}
button.classList.add("selected");
})
});
}
// override form submit action to update the actually selected categories