Skip to content

Instantly share code, notes, and snippets.

@po5

po5/ab-search-autocomplete.user.js

Last active April 21, 2024 03:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save po5/a56f53567eca72f2f32f2545e0236d39 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save po5/a56f53567eca72f2f32f2545e0236d39 to your computer and use it in GitHub Desktop.
Download ZIP
xd
Raw
ab-search-autocomplete.user.js
// ==UserScript==
// @name AB search autocomplete
// @namespace https://github.com/po5
// @version 0.2.0
// @description :cool:
// @author Eva
// @homepage https://animebytes.tv/forums.php?action=viewthread&threadid=24689
// @icon https://animebytes.tv/favicon.ico
// @updateURL https://gist.github.com/po5/a56f53567eca72f2f32f2545e0236d39/raw/ab-search-autocomplete.user.js
// @downloadURL https://gist.github.com/po5/a56f53567eca72f2f32f2545e0236d39/raw/ab-search-autocomplete.user.js
// @grant none
// @match https://animebytes.tv/*
// @license GPL-3.0
// @run-at document-end
// ==/UserScript==
function debounce(func, timeout=200){
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
function clearResults(ccomplete) {
while (ccomplete.lastChild) {
ccomplete.removeChild(ccomplete.lastChild);
}
}
async function autocomplete(csearch, ccomplete, ctype) {
let search = csearch.value;
if (search == '') {
select = 0;
return clearResults(ccomplete);
}
csearch.style.background = color + ' url("data:image/gif;base64,R0lGODlhEAAQALMMAKqooJGOhp2bk7e1rZ2bkre1rJCPhqqon8PBudDOxXd1bISCef///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAMACwAAAAAEAAQAAAET5DJyYyhmAZ7sxQEs1nMsmACGJKmSaVEOLXnK1PuBADepCiMg/DQ+/2GRI8RKOxJfpTCIJNIYArS6aRajWYZCASDa41Ow+Fx2YMWOyfpTAQAIfkEBQAADAAsAAAAABAAEAAABE6QyckEoZgKe7MEQMUxhoEd6FFdQWlOqTq15SlT9VQM3rQsjMKO5/n9hANixgjc9SQ/CgKRUSgw0ynFapVmGYkEg3v1gsPibg8tfk7CnggAIfkEBQAADAAsAAAAABAAEAAABE2QycnOoZjaA/IsRWV1goCBoMiUJTW8A0XMBPZmM4Ug3hQEjN2uZygahDyP0RBMEpmTRCKzWGCkUkq1SsFOFQrG1tr9gsPc3jnco4A9EQAh+QQFAAAMACwAAAAAEAAQAAAETpDJyUqhmFqbJ0LMIA7McWDfF5LmAVApOLUvLFMmlSTdJAiM3a73+wl5HYKSEET2lBSFIhMIYKRSimFriGIZiwWD2/WCw+Jt7xxeU9qZCAAh+QQFAAAMACwAAAAAEAAQAAAETZDJyRCimFqbZ0rVxgwF9n3hSJbeSQ2rCWIkpSjddBzMfee7nQ/XCfJ+OQYAQFksMgQBxumkEKLSCfVpMDCugqyW2w18xZmuwZycdDsRACH5BAUAAAwALAAAAAAQABAAAARNkMnJUqKYWpunUtXGIAj2feFIlt5JrWybkdSydNNQMLaND7pC79YBFnY+HENHMRgyhwPGaQhQotGm00oQMLBSLYPQ9QIASrLAq5x0OxEAIfkEBQAADAAsAAAAABAAEAAABE2QycmUopham+da1cYkCfZ94UiW3kmtbJuRlGF0E4Iwto3rut6tA9wFAjiJjkIgZAYDTLNJgUIpgqyAcTgwCuACJssAdL3gpLmbpLAzEQA7") right 10px center no-repeat';
last = window.performance.now();
let data = [];
let currcache = 0;
if (cached[ctype + search]) {
currcache = last;
data = cached[ctype + search];
} else {
let response = await fetch('/xhr/ac/search/' + ctype + '?q=' + encodeURIComponent(search) + '&cache=' + last);
currcache = +response.url.split('&cache=')[1];
data = await response.json();
}
if (currcache >= cache || cached[ctype + search]) {
clearResults(ccomplete);
select = 0;
if (currcache === last) csearch.style.background = null;
cached[ctype + search] = data;
if (data.results) {
cache = currcache;
data.results.slice(0, 10).forEach(anime => {
const complete = document.createElement('li');
complete.style = 'display: block !important;border-bottom:1px solid rgba(78, 78, 78, 0.31);padding:4px 3px;white-space: nowrap';
const link = document.createElement('a');
const text = document.createElement('textarea');
text.innerHTML = anime.name;
let title = text.value;
link.href = (ctype == 'anime' ? '/torrents.php?id=' : '/torrents2.php?id=') + anime.id;
if (title.length > 80) {
link.title = title;
title = title.substring(0, 80).trim() + '…';
}
link.appendChild(document.createTextNode(title + (anime.year == '0' ? '' : ' [' + anime.year + ']') + ' - ' + anime.type));
complete.appendChild(link);
ccomplete.appendChild(complete);
});
}
if (Object.keys(cached).length > 200) cached = {}
}
}
function arrowNav(event) {
let dir = 0;
if (event.key == 'ArrowUp') dir = -1;
if (event.key == 'ArrowDown') dir = 1;
const selected = event.target.nextSibling.querySelector(':nth-child(' + (select + dir) + ')');
if (event.key == 'Enter') {
window.location.href = selected.firstChild.href;
event.preventDefault();
}
Array.from(event.target.nextSibling.children).forEach(thing => {
thing.style.outline = 'none';
});
if (selected) {
select = select + dir;
selected.style.outline = '1px dotted grey';
} else if (event.target.nextSibling.firstChild) {
select = 1;
event.target.nextSibling.firstChild.style.outline = '1px dotted grey';
}
}
let search = document.querySelector('form[action$="/series.php"] > .series_search, form[action$="/torrents.php"] > .series_search');
let nsearch = document.querySelector("#series_name_anime");
let search2 = document.querySelector('form[action$="/torrents2.php"] > .series_search');
let nsearch2 = document.querySelector('.inputtext[name="groupname"]');
let last = 0;
let cache = 0;
let cached = {};
let select = 0;
if (search) {
var color = window.getComputedStyle(search).getPropertyValue('background-color');
search.parentElement.style.position = 'relative';
search.autocomplete = 'off';
search2.parentElement.style.position = 'relative';
search2.autocomplete = 'off';
if (nsearch) {
nsearch.parentElement.style.position = 'relative';
nsearch.autocomplete = 'off';
const ntorrentscomplete = document.createElement('ul');
ntorrentscomplete.id = 'ntorrentscomplete';
ntorrentscomplete.className = 'torrentscomplete';
ntorrentscomplete.style = 'position:absolute;background:' + color + ';color:#9a9a9a;overflow:hidden;width:auto;max-width:888px;z-index:1000;min-width:unset;left:0;top:' + (search.clientHeight - 1) + 'px;padding:0;text-align:left;font-size:0.723rem';
const animedb2 = debounce(() => autocomplete(nsearch, ntorrentscomplete, 'anime'));
nsearch.parentNode.insertBefore(ntorrentscomplete, nsearch.nextSibling);
nsearch.addEventListener('input', () => {
nsearch.style.background = color + ' url("data:image/gif;base64,R0lGODlhEAAQALMMAKqooJGOhp2bk7e1rZ2bkre1rJCPhqqon8PBudDOxXd1bISCef///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAMACwAAAAAEAAQAAAET5DJyYyhmAZ7sxQEs1nMsmACGJKmSaVEOLXnK1PuBADepCiMg/DQ+/2GRI8RKOxJfpTCIJNIYArS6aRajWYZCASDa41Ow+Fx2YMWOyfpTAQAIfkEBQAADAAsAAAAABAAEAAABE6QyckEoZgKe7MEQMUxhoEd6FFdQWlOqTq15SlT9VQM3rQsjMKO5/n9hANixgjc9SQ/CgKRUSgw0ynFapVmGYkEg3v1gsPibg8tfk7CnggAIfkEBQAADAAsAAAAABAAEAAABE2QycnOoZjaA/IsRWV1goCBoMiUJTW8A0XMBPZmM4Ug3hQEjN2uZygahDyP0RBMEpmTRCKzWGCkUkq1SsFOFQrG1tr9gsPc3jnco4A9EQAh+QQFAAAMACwAAAAAEAAQAAAETpDJyUqhmFqbJ0LMIA7McWDfF5LmAVApOLUvLFMmlSTdJAiM3a73+wl5HYKSEET2lBSFIhMIYKRSimFriGIZiwWD2/WCw+Jt7xxeU9qZCAAh+QQFAAAMACwAAAAAEAAQAAAETZDJyRCimFqbZ0rVxgwF9n3hSJbeSQ2rCWIkpSjddBzMfee7nQ/XCfJ+OQYAQFksMgQBxumkEKLSCfVpMDCugqyW2w18xZmuwZycdDsRACH5BAUAAAwALAAAAAAQABAAAARNkMnJUqKYWpunUtXGIAj2feFIlt5JrWybkdSydNNQMLaND7pC79YBFnY+HENHMRgyhwPGaQhQotGm00oQMLBSLYPQ9QIASrLAq5x0OxEAIfkEBQAADAAsAAAAABAAEAAABE2QycmUopham+da1cYkCfZ94UiW3kmtbJuRlGF0E4Iwto3rut6tA9wFAjiJjkIgZAYDTLNJgUIpgqyAcTgwCuACJssAdL3gpLmbpLAzEQA7") right 10px center no-repeat';
animedb2()
});
}
if (nsearch2) {
nsearch2.parentElement.style.position = 'relative';
nsearch2.autocomplete = 'off';
const ntorrentscomplete2 = document.createElement('ul');
ntorrentscomplete2.id = 'ntorrentscomplete2';
ntorrentscomplete2.className = 'torrentscomplete';
ntorrentscomplete2.style = 'position:absolute;background:' + color + ';color:#9a9a9a;overflow:hidden;width:auto;max-width:888px;z-index:1000;min-width:unset;left:10px;top:' + (search.clientHeight - 1) + 'px;padding:0;text-align:left;font-size:0.723rem';
const musicdb2 = debounce(() => autocomplete(nsearch2, ntorrentscomplete2, 'music'));
nsearch2.parentNode.insertBefore(ntorrentscomplete2, nsearch2.nextSibling);
nsearch2.addEventListener('input', () => {
nsearch2.style.background = color + ' url("data:image/gif;base64,R0lGODlhEAAQALMMAKqooJGOhp2bk7e1rZ2bkre1rJCPhqqon8PBudDOxXd1bISCef///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAMACwAAAAAEAAQAAAET5DJyYyhmAZ7sxQEs1nMsmACGJKmSaVEOLXnK1PuBADepCiMg/DQ+/2GRI8RKOxJfpTCIJNIYArS6aRajWYZCASDa41Ow+Fx2YMWOyfpTAQAIfkEBQAADAAsAAAAABAAEAAABE6QyckEoZgKe7MEQMUxhoEd6FFdQWlOqTq15SlT9VQM3rQsjMKO5/n9hANixgjc9SQ/CgKRUSgw0ynFapVmGYkEg3v1gsPibg8tfk7CnggAIfkEBQAADAAsAAAAABAAEAAABE2QycnOoZjaA/IsRWV1goCBoMiUJTW8A0XMBPZmM4Ug3hQEjN2uZygahDyP0RBMEpmTRCKzWGCkUkq1SsFOFQrG1tr9gsPc3jnco4A9EQAh+QQFAAAMACwAAAAAEAAQAAAETpDJyUqhmFqbJ0LMIA7McWDfF5LmAVApOLUvLFMmlSTdJAiM3a73+wl5HYKSEET2lBSFIhMIYKRSimFriGIZiwWD2/WCw+Jt7xxeU9qZCAAh+QQFAAAMACwAAAAAEAAQAAAETZDJyRCimFqbZ0rVxgwF9n3hSJbeSQ2rCWIkpSjddBzMfee7nQ/XCfJ+OQYAQFksMgQBxumkEKLSCfVpMDCugqyW2w18xZmuwZycdDsRACH5BAUAAAwALAAAAAAQABAAAARNkMnJUqKYWpunUtXGIAj2feFIlt5JrWybkdSydNNQMLaND7pC79YBFnY+HENHMRgyhwPGaQhQotGm00oQMLBSLYPQ9QIASrLAq5x0OxEAIfkEBQAADAAsAAAAABAAEAAABE2QycmUopham+da1cYkCfZ94UiW3kmtbJuRlGF0E4Iwto3rut6tA9wFAjiJjkIgZAYDTLNJgUIpgqyAcTgwCuACJssAdL3gpLmbpLAzEQA7") right 10px center no-repeat';
musicdb2()
});
}
const torrentscomplete = document.createElement('ul');
torrentscomplete.id = 'torrentscomplete';
torrentscomplete.className = 'torrentscomplete';
torrentscomplete.style = 'position:absolute;background:' + color + ';color:#9a9a9a;overflow:hidden;width:auto;max-width:888px;z-index:1000;min-width:unset;left:0;top:' + (search.clientHeight - 1) + 'px;padding:0;text-align:left;font-size:0.723rem';
const animedb = debounce(() => autocomplete(search, torrentscomplete, 'anime'));
search.parentNode.insertBefore(torrentscomplete, search.nextSibling);
const torrentscompletedb = () => {
search.style.background = color + ' url("data:image/gif;base64,R0lGODlhEAAQALMMAKqooJGOhp2bk7e1rZ2bkre1rJCPhqqon8PBudDOxXd1bISCef///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAMACwAAAAAEAAQAAAET5DJyYyhmAZ7sxQEs1nMsmACGJKmSaVEOLXnK1PuBADepCiMg/DQ+/2GRI8RKOxJfpTCIJNIYArS6aRajWYZCASDa41Ow+Fx2YMWOyfpTAQAIfkEBQAADAAsAAAAABAAEAAABE6QyckEoZgKe7MEQMUxhoEd6FFdQWlOqTq15SlT9VQM3rQsjMKO5/n9hANixgjc9SQ/CgKRUSgw0ynFapVmGYkEg3v1gsPibg8tfk7CnggAIfkEBQAADAAsAAAAABAAEAAABE2QycnOoZjaA/IsRWV1goCBoMiUJTW8A0XMBPZmM4Ug3hQEjN2uZygahDyP0RBMEpmTRCKzWGCkUkq1SsFOFQrG1tr9gsPc3jnco4A9EQAh+QQFAAAMACwAAAAAEAAQAAAETpDJyUqhmFqbJ0LMIA7McWDfF5LmAVApOLUvLFMmlSTdJAiM3a73+wl5HYKSEET2lBSFIhMIYKRSimFriGIZiwWD2/WCw+Jt7xxeU9qZCAAh+QQFAAAMACwAAAAAEAAQAAAETZDJyRCimFqbZ0rVxgwF9n3hSJbeSQ2rCWIkpSjddBzMfee7nQ/XCfJ+OQYAQFksMgQBxumkEKLSCfVpMDCugqyW2w18xZmuwZycdDsRACH5BAUAAAwALAAAAAAQABAAAARNkMnJUqKYWpunUtXGIAj2feFIlt5JrWybkdSydNNQMLaND7pC79YBFnY+HENHMRgyhwPGaQhQotGm00oQMLBSLYPQ9QIASrLAq5x0OxEAIfkEBQAADAAsAAAAABAAEAAABE2QycmUopham+da1cYkCfZ94UiW3kmtbJuRlGF0E4Iwto3rut6tA9wFAjiJjkIgZAYDTLNJgUIpgqyAcTgwCuACJssAdL3gpLmbpLAzEQA7") right 10px center no-repeat';
animedb();
}
search.addEventListener('input', torrentscompletedb);
const torrentscomplete2 = document.createElement('ul');
torrentscomplete2.id = 'torrentscomplete2';
torrentscomplete2.className = 'torrentscomplete';
torrentscomplete2.style = 'position:absolute;background:' + color + ';color:#9a9a9a;overflow:hidden;width:auto;max-width:888px;z-index:1000;min-width:unset;left:0;top:' + (search.clientHeight - 1) + 'px;padding:0;text-align:left;font-size:0.723rem';
const musicdb = debounce(() => autocomplete(search2, torrentscomplete2, 'music'));
search2.parentNode.insertBefore(torrentscomplete2, search2.nextSibling);
const torrentscomplete2db = () => {
search2.style.background = color + ' url("data:image/gif;base64,R0lGODlhEAAQALMMAKqooJGOhp2bk7e1rZ2bkre1rJCPhqqon8PBudDOxXd1bISCef///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAMACwAAAAAEAAQAAAET5DJyYyhmAZ7sxQEs1nMsmACGJKmSaVEOLXnK1PuBADepCiMg/DQ+/2GRI8RKOxJfpTCIJNIYArS6aRajWYZCASDa41Ow+Fx2YMWOyfpTAQAIfkEBQAADAAsAAAAABAAEAAABE6QyckEoZgKe7MEQMUxhoEd6FFdQWlOqTq15SlT9VQM3rQsjMKO5/n9hANixgjc9SQ/CgKRUSgw0ynFapVmGYkEg3v1gsPibg8tfk7CnggAIfkEBQAADAAsAAAAABAAEAAABE2QycnOoZjaA/IsRWV1goCBoMiUJTW8A0XMBPZmM4Ug3hQEjN2uZygahDyP0RBMEpmTRCKzWGCkUkq1SsFOFQrG1tr9gsPc3jnco4A9EQAh+QQFAAAMACwAAAAAEAAQAAAETpDJyUqhmFqbJ0LMIA7McWDfF5LmAVApOLUvLFMmlSTdJAiM3a73+wl5HYKSEET2lBSFIhMIYKRSimFriGIZiwWD2/WCw+Jt7xxeU9qZCAAh+QQFAAAMACwAAAAAEAAQAAAETZDJyRCimFqbZ0rVxgwF9n3hSJbeSQ2rCWIkpSjddBzMfee7nQ/XCfJ+OQYAQFksMgQBxumkEKLSCfVpMDCugqyW2w18xZmuwZycdDsRACH5BAUAAAwALAAAAAAQABAAAARNkMnJUqKYWpunUtXGIAj2feFIlt5JrWybkdSydNNQMLaND7pC79YBFnY+HENHMRgyhwPGaQhQotGm00oQMLBSLYPQ9QIASrLAq5x0OxEAIfkEBQAADAAsAAAAABAAEAAABE2QycmUopham+da1cYkCfZ94UiW3kmtbJuRlGF0E4Iwto3rut6tA9wFAjiJjkIgZAYDTLNJgUIpgqyAcTgwCuACJssAdL3gpLmbpLAzEQA7") right 10px center no-repeat';
musicdb();
}
search2.addEventListener('input', torrentscomplete2db);
document.querySelectorAll('form[action$="/series.php"] > .series_search, form[action$="/torrents.php"] > .series_search, form[action$="/torrents2.php"] > .series_search, #series_name_anime, .inputtext[name="groupname"]').forEach(input => {
input.addEventListener('keydown', arrowNav);
input.addEventListener('focus', (e) => {
select = 0;
Array.from(e.target.nextSibling.children).forEach(thing => {
thing.style.outline = 'none';
});
})
});
const style = document.createElement("style");
style.innerHTML = '.torrentscomplete {display:none} .torrentscomplete > li {outline-offset:-1px} .torrentscomplete > li:last-child {border-bottom:none !important} form[action$="/series.php"]:focus-within > #torrentscomplete, form[action$="/torrents.php"]:focus-within > #torrentscomplete, form[action$="/torrents2.php"]:focus-within > #torrentscomplete2, #series_names_anime:focus-within > #ntorrentscomplete, #ui-id-2 dd[style]:focus-within > #ntorrentscomplete2 {display:block} .torrentscomplete a {display:block;width:100%}';
document.head.appendChild(style);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment