kenkeiras/new-codigoparallevar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement basic popup creation for note search.

Browse Source
This commit is contained in:
Sergio Martínez Portela 2022-10-04 23:55:57 +02:00
parent d7905f5b0a
commit a616d903fb
1 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
static/search-box.js
View File

@ -10,9 +10,31 @@ function _codigoparallevar_enable_search_box(selector, options) {
const resultsBox = document.createElement('div'); const resultsBox = document.createElement('div');
resultsBox.setAttribute('class', 'results-box'); resultsBox.setAttribute('class', 'results-box');
// Results box contents
const innerSearchBox = document.createElement('input');
innerSearchBox.setAttribute('type', 'text');
innerSearchBox.setAttribute('placeholder', element.getAttribute('placeholder'));
resultsBox.appendChild(innerSearchBox);
const resultsList = document.createElement('ul');
resultsBox.appendChild(resultsList);
resultsBoxBackdrop.appendChild(resultsBox); resultsBoxBackdrop.appendChild(resultsBox);
document.body.appendChild(resultsBoxBackdrop); document.body.appendChild(resultsBoxBackdrop);
// Popup cancellation
resultsBoxBackdrop.onclick = () => {
resultsBoxBackdrop.classList.add('hidden');
};
resultsBox.onclick = (ev) => {
ev.stopPropagation();
};
// Element triggers popup
element.onfocus = () => {
resultsBoxBackdrop.classList.remove('hidden');
innerSearchBox.focus();
};
const DEBOUNCE_TIME = 500; // Milliseconds const DEBOUNCE_TIME = 500; // Milliseconds
const MIN_LENGTH = 3; const MIN_LENGTH = 3;
@ -23,7 +45,7 @@ function _codigoparallevar_enable_search_box(selector, options) {
let lastVal = null; let lastVal = null;
const doQuery = () => { const doQuery = () => {
const val = element.value.trim(); const val = innerSearchBox.value.trim();
if ((val.length < MIN_LENGTH) || (val === lastVal)) { if ((val.length < MIN_LENGTH) || (val === lastVal)) {
return; return;
} }
@ -45,11 +67,11 @@ function _codigoparallevar_enable_search_box(selector, options) {
}; };
element.removeAttribute('disabled'); element.removeAttribute('disabled');
element.onkeyup = (ev) => { innerSearchBox.onkeyup = (ev) => {
if (debounceWaiter !== null) { if (debounceWaiter !== null) {
clearTimeout(debounceWaiter); clearTimeout(debounceWaiter);
} }
debounceWaiter = setTimeout(doQuery, DEBOUNCE_TIME); debounceWaiter = setTimeout(doQuery, DEBOUNCE_TIME);
}; };
} }