webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00
Code Activity

Added global search input debounce and loading indicator

Browse Source
This commit is contained in:
Dan Brown
2022-11-20 22:20:31 +00:00
parent 2c1f20969a
commit c617190905
4 changed files with 47 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
resources/js/components/global-search.js
View File

@ -1,8 +1,9 @@
import {htmlToDom} from "../services/dom";
import {debounce} from "../services/util";
/**
* @extends {Component}
*/
import {htmlToDom} from "../services/dom";
class GlobalSearch {
setup() {
@ -10,23 +11,43 @@ class GlobalSearch {
this.input = this.$refs.input;
this.suggestions = this.$refs.suggestions;
this.suggestionResultsWrap = this.$refs.suggestionResults;
this.loadingWrap = this.$refs.loading;
this.setupListeners();
}
setupListeners() {
const updateSuggestionsDebounced = debounce(this.updateSuggestions.bind(this), 200, false);
// Handle search input changes
this.input.addEventListener('input', () => {
const value = this.input.value;
if (value.length > 0) {
this.updateSuggestions(value);
this.loadingWrap.style.display = 'block';
this.suggestionResultsWrap.style.opacity = '0.5';
updateSuggestionsDebounced(value);
} else {
this.hideSuggestions();
}
});
// Allow double click to show auto-click suggestions
this.input.addEventListener('dblclick', () => {
this.input.setAttribute('autocomplete', 'on');
this.input.blur();
this.input.focus();
})
}
/**
* @param {String} search
*/
async updateSuggestions(search) {
const {data: results} = await window.$http.get('/ajax/search/entities', {term: search, count: 5});
if (!this.input.value) {
return;
}
const resultDom = htmlToDom(results);
const childrenToTrim = Array.from(resultDom.children).slice(9);
@ -35,6 +56,8 @@ class GlobalSearch {
}
this.suggestionResultsWrap.innerHTML = '';
this.suggestionResultsWrap.style.opacity = '1';
this.loadingWrap.style.display = 'none';
this.suggestionResultsWrap.append(resultDom);
if (!this.container.classList.contains('search-active')) {
this.showSuggestions();