nakidai
/
whoogle-search
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix input cursor position bug on mobile 

Refactors how search suggestions are added to the view

Fixes #1133
main
Ben Busby 2024-04-19 14:00:12 -06:00
parent 37ff61dfac
commit 9bfdd88a5e
No known key found for this signature in database
GPG Key ID: B9B7231E01D924A1
1 changed files with 15 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/static/js/autocomplete.js
View File

@ -21,16 +21,6 @@ const handleUserInput = () => {
xhrRequest.send('q=' + searchInput.value); xhrRequest.send('q=' + searchInput.value);
}; };
const closeAllLists = el => {
// Close all autocomplete suggestions
let suggestions = document.getElementsByClassName("autocomplete-items");
for (let i = 0; i < suggestions.length; i++) {
if (el !== suggestions[i] && el !== searchInput) {
suggestions[i].parentNode.removeChild(suggestions[i]);
}
}
};
const removeActive = suggestion => { const removeActive = suggestion => {
// Remove "autocomplete-active" class from previously active suggestion // Remove "autocomplete-active" class from previously active suggestion
for (let i = 0; i < suggestion.length; i++) { for (let i = 0; i < suggestion.length; i++) {
@ -71,7 +61,7 @@ const addActive = (suggestion) => {
const autocompleteInput = (e) => { const autocompleteInput = (e) => {
// Handle navigation between autocomplete suggestions // Handle navigation between autocomplete suggestions
let suggestion = document.getElementById(this.id + "-autocomplete-list"); let suggestion = document.getElementById("autocomplete-list");
if (suggestion) suggestion = suggestion.getElementsByTagName("div"); if (suggestion) suggestion = suggestion.getElementsByTagName("div");
if (e.keyCode === 40) { // down if (e.keyCode === 40) { // down
e.preventDefault(); e.preventDefault();
@ -92,29 +82,28 @@ const autocompleteInput = (e) => {
}; };
const updateAutocompleteList = () => { const updateAutocompleteList = () => {
let autocompleteList, autocompleteItem, i; let autocompleteItem, i;
let val = originalSearch; let val = originalSearch;
closeAllLists();
let autocompleteList = document.getElementById("autocomplete-list");
autocompleteList.innerHTML = "";
if (!val || !autocompleteResults) { if (!val || !autocompleteResults) {
return false; return false;
} }
currentFocus = -1; currentFocus = -1;
autocompleteList = document.createElement("div");
autocompleteList.setAttribute("id", this.id + "-autocomplete-list");
autocompleteList.setAttribute("class", "autocomplete-items");
searchInput.parentNode.appendChild(autocompleteList);
for (i = 0; i < autocompleteResults.length; i++) { for (i = 0; i < autocompleteResults.length; i++) {
if (autocompleteResults[i].substr(0, val.length).toUpperCase() === val.toUpperCase()) { if (autocompleteResults[i].substr(0, val.length).toUpperCase() === val.toUpperCase()) {
autocompleteItem = document.createElement("div"); autocompleteItem = document.createElement("div");
autocompleteItem.setAttribute("class", "autocomplete-item");
autocompleteItem.innerHTML = "<strong>" + autocompleteResults[i].substr(0, val.length) + "</strong>"; autocompleteItem.innerHTML = "<strong>" + autocompleteResults[i].substr(0, val.length) + "</strong>";
autocompleteItem.innerHTML += autocompleteResults[i].substr(val.length); autocompleteItem.innerHTML += autocompleteResults[i].substr(val.length);
autocompleteItem.innerHTML += "<input type=\"hidden\" value=\"" + autocompleteResults[i] + "\">"; autocompleteItem.innerHTML += "<input type=\"hidden\" value=\"" + autocompleteResults[i] + "\">";
autocompleteItem.addEventListener("click", function () { autocompleteItem.addEventListener("click", function () {
searchInput.value = this.getElementsByTagName("input")[0].value; searchInput.value = this.getElementsByTagName("input")[0].value;
closeAllLists(); autocompleteList.innerHTML = "";
document.getElementById("search-form").submit(); document.getElementById("search-form").submit();
}); });
autocompleteList.appendChild(autocompleteItem); autocompleteList.appendChild(autocompleteItem);
@ -123,10 +112,16 @@ const updateAutocompleteList = () => {
}; };
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
let autocompleteList = document.createElement("div");
autocompleteList.setAttribute("id", "autocomplete-list");
autocompleteList.setAttribute("class", "autocomplete-items");
searchInput = document.getElementById("search-bar"); searchInput = document.getElementById("search-bar");
searchInput.parentNode.appendChild(autocompleteList);
searchInput.addEventListener("keydown", (event) => autocompleteInput(event)); searchInput.addEventListener("keydown", (event) => autocompleteInput(event));
document.addEventListener("click", function (e) { document.addEventListener("click", function (e) {
closeAllLists(e.target); autocompleteList.innerHTML = "";
}); });
}); });