BookStack Code Mirror - bookstack/blob - resources/js/components/global-search.js

   1 /**
   2  * @extends {Component}
   3  */
   4 import {htmlToDom} from "../services/dom";
   5
   6 class GlobalSearch {
   7
   8     setup() {
   9         this.input = this.$refs.input;
  10         this.suggestions = this.$refs.suggestions;
  11         this.suggestionResultsWrap = this.$refs.suggestionResults;
  12
  13         this.setupListeners();
  14     }
  15
  16     setupListeners() {
  17         this.input.addEventListener('input', () => {
  18             const value = this.input.value;
  19             if (value.length > 0) {
  20                 this.updateSuggestions(value);
  21             }  else {
  22                 this.hideSuggestions();
  23             }
  24         });
  25     }
  26
  27     async updateSuggestions(search) {
  28         const {data: results} = await window.$http.get('/ajax/search/entities', {term: search, count: 5});
  29         const resultDom = htmlToDom(results);
  30
  31         const childrenToTrim = Array.from(resultDom.children).slice(9);
  32         for (const child of childrenToTrim) {
  33             child.remove();
  34         }
  35
  36         this.suggestions.style.display = 'block';
  37         this.suggestionResultsWrap.innerHTML = '';
  38         this.suggestionResultsWrap.append(resultDom);
  39     }
  40
  41     hideSuggestions() {
  42         this.suggestions.style.display = null;
  43         this.suggestionResultsWrap.innerHTML = '';
  44     }
  45 }
  46
  47 export default GlobalSearch;