Added new endpoint for search suggestions

resources/js/components/entity-selector.js

@@ -115,7 +115,7 @@ class EntitySelector {
     }
 
     searchUrl() {
-        return `/ajax/search/entities?types=${encodeURIComponent(this.entityTypes)}&permission=${encodeURIComponent(this.entityPermission)}`;
+        return `/search/entity-selector?types=${encodeURIComponent(this.entityTypes)}&permission=${encodeURIComponent(this.entityPermission)}`;
     }
 
     searchEntities(searchTerm) {

resources/js/components/global-search.js

@@ -12,6 +12,7 @@ class GlobalSearch {
         this.suggestions = this.$refs.suggestions;
         this.suggestionResultsWrap = this.$refs.suggestionResults;
         this.loadingWrap = this.$refs.loading;
+        this.button = this.$refs.button;
 
         this.setupListeners();
     }
@@ -34,7 +35,7 @@ class GlobalSearch {
         // Allow double click to show auto-click suggestions
         this.input.addEventListener('dblclick', () => {
             this.input.setAttribute('autocomplete', 'on');
-            this.input.blur();
+            this.button.focus();
             this.input.focus();
         })
     }
@@ -43,18 +44,13 @@ class GlobalSearch {
      * @param {String} search
      */
     async updateSuggestions(search) {
-        const {data: results} = await window.$http.get('/ajax/search/entities', {term: search, count: 5});
+        const {data: results} = await window.$http.get('/search/suggest', {term: search});
         if (!this.input.value) {
             return;
         }
         
         const resultDom = htmlToDom(results);
 
-        const childrenToTrim = Array.from(resultDom.children).slice(9);
-        for (const child of childrenToTrim) {
-            child.remove();
-        }
-
         this.suggestionResultsWrap.innerHTML = '';
         this.suggestionResultsWrap.style.opacity = '1';
         this.loadingWrap.style.display = 'none';

resources/sass/_animations.scss

@@ -18,7 +18,7 @@
 
 .search-suggestions-animation{
   animation-name: searchSuggestions;
-  animation-duration: 180ms;
+  animation-duration: 120ms;
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
 }

resources/views/common/header.blade.php

@@ -20,7 +20,11 @@
         <div class="flex-container-column items-center justify-center hide-under-l">
             @if (hasAppAccess())
             <form component="global-search" action="{{ url('/search') }}" method="GET" class="search-box" role="search">
-                <button id="header-search-box-button" type="submit" aria-label="{{ trans('common.search') }}" tabindex="-1">@icon('search') </button>
+                <button id="header-search-box-button"
+                        refs="global-search@button"
+                        type="submit"
+                        aria-label="{{ trans('common.search') }}"
+                        tabindex="-1">@icon('search')</button>
                 <input id="header-search-box-input"
                        refs="global-search@input"
                        type="text"

resources/views/search/parts/entity-suggestion-list.blade.php

@@ -0,0 +1,21 @@
+<div class="entity-list">
+    @if(count($entities) > 0)
+        @foreach($entities as $index => $entity)
+
+            @include('entities.list-item', [
+                'entity' => $entity,
+                'showPath' => true,
+                'locked' => false,
+            ])
+        
+            @if($index !== count($entities) - 1)
+                <hr>
+            @endif
+
+        @endforeach
+    @else
+        <div class="text-muted px-m py-m">
+            {{ trans('common.no_items') }}
+        </div>
+    @endif
+</div>