Adjusted global search preview for dark mode

[bookstack] / resources / js / components / auto-suggest.js

diff --git a/resources/js/components/auto-suggest.js b/resources/js/components/auto-suggest.js
index 68de49b4a32740143e7fc6fe24e442c0e502af5e..80857cbe5c5cb20d121bfbcb6d40dd17ff786285 100644 (file)
--- a/resources/js/components/auto-suggest.js
+++ b/resources/js/components/auto-suggest.js
@@ -88,14 +88,12 @@ class AutoSuggest {
         }
 
         const nameFilter = this.getNameFilterIfNeeded();
         }
 
         const nameFilter = this.getNameFilterIfNeeded();

-        const search = this.input.value.slice(0, 3).toLowerCase();
+        const search = this.input.value.toLowerCase();

         const suggestions = await this.loadSuggestions(search, nameFilter);
         const suggestions = await this.loadSuggestions(search, nameFilter);

-        let toShow = suggestions.slice(0, 6);
-        if (search.length > 0) {
-            toShow = suggestions.filter(val => {
-                return val.toLowerCase().includes(search);
-            }).slice(0, 6);
-        }
+
+        const toShow = suggestions.filter(val => {
+            return search === '' || val.toLowerCase().startsWith(search);
+        }).slice(0, 10);

 
         this.displaySuggestions(toShow);
     }
 
         this.displaySuggestions(toShow);
     }


@@ -111,6 +109,9 @@ class AutoSuggest {
      * @returns {Promise<Object|String|*>}
      */
     async loadSuggestions(search, nameFilter = null) {
      * @returns {Promise<Object|String|*>}
      */
     async loadSuggestions(search, nameFilter = null) {

+        // Truncate search to prevent over numerous lookups
+        search = search.slice(0, 4);
+

         const params = {search, name: nameFilter};
         const cacheKey = `${this.url}:${JSON.stringify(params)}`;
 
         const params = {search, name: nameFilter};
         const cacheKey = `${this.url}:${JSON.stringify(params)}`;
 


@@ -131,7 +132,7 @@ class AutoSuggest {
             return this.hideSuggestions();
         }
 
             return this.hideSuggestions();
         }
 

-        this.list.innerHTML = suggestions.map(value => `<li><button type="button">${escapeHtml(value)}</button></li>`).join('');
+        this.list.innerHTML = suggestions.map(value => `<li><button type="button" class="text-item">${escapeHtml(value)}</button></li>`).join('');

         this.list.style.display = 'block';
         for (const button of this.list.querySelectorAll('button')) {
             button.addEventListener('blur', this.hideSuggestionsIfFocusedLost.bind(this));
         this.list.style.display = 'block';
         for (const button of this.list.querySelectorAll('button')) {
             button.addEventListener('blur', this.hideSuggestionsIfFocusedLost.bind(this));