Skeleton for displaying search results

InvenTree/templates/js/translated/search.js

@@ -25,8 +25,7 @@ function openSearchPanel() {
 
     var panel = $('#offcanvas-search');
 
-    // Ensure the 'no results found' element is visible
-    panel.find('#search-no-results').show();
+    clearSearchResults();
 
     // Finally, grab keyboard focus in the search bar
     panel.find('#search-input').focus();
@@ -39,6 +38,7 @@ var searchRequests = [];
 var searchInputTimer = null;
 var searchText = null;
 var searchTextPrevious = null;
+var searchQueries = [];
 
 function searchTextChanged(event) {
 
@@ -55,14 +55,23 @@ function updateSearch() {
         return;
     }
 
+    clearSearchResults();
+    
     if (searchText.length == 0) {
         return;
     }
-
+    
     searchTextPrevious = searchText;
 
+    // Cancel any previous AJAX requests
+    searchQueries.forEach(function(query) {
+        query.abort();
+    });
+
+    searchQueries = [];
+    
     // Search for matching parts
-    inventreeGet(
+    searchQueries.push(inventreeGet(
         `{% url "api-part-list" %}`,
         {
             search: searchText,
@@ -70,14 +79,14 @@ function updateSearch() {
             offset: 0,
         },
         {
-            success: function(results) {
-                // TODO
+            success: function(response) {
+                addSearchResults('part', response.results, '{% trans "Parts" %}');
             }
         }
-    );
+    ));
 
     // Search for matching stock items
-    inventreeGet(
+    searchQueries.push(inventreeGet(
         '{% url "api-stock-list" %}',
         {
             search: searchText,
@@ -85,10 +94,53 @@ function updateSearch() {
             offset: 0,
         },
         {
-            success: function(results) {
-                // TODO
+            success: function(response) {
+                addSearchResults('stock', response.results, '{% trans "Stock Items" %}');
             }
         }
-    )
+    ));
+}
 
+
+function clearSearchResults() {
+
+    var panel = $('#offcanvas-search');
+    
+    // Ensure the 'no results found' element is visible
+    panel.find('#search-no-results').show();
+    
+    // Delete any existing search results
+    panel.find('#search-results').empty();
+}
+
+
+// Add a group of results to the list
+function addSearchResults(key, results, title, formatter) {
+    
+    if (results.length == 0) {
+        // Do not display this group, as there are no results
+        return;
+    }
+
+    var panel = $('#offcanvas-search');
+
+    // Ensure the 'no results found' element is hidden
+    panel.find('#search-no-results').hide();
+
+    var results_element = panel.find('#search-results');
+    
+    var header = `search-results-${key}`;
+    
+    panel.find('#search-results').append(`
+        <div class='search-result-group' id='${header}'>
+            <h5>${title}</h5>
+        </div>
+    `);
+
+    results.forEach(function(result) {
+        // results_html.append(formatter(result));
+        var result_html = `<div class='search-result-entry'>hello result</div>`;
+
+        panel.find(`#${header}`).append(result_html);
+    });
 }

InvenTree/templates/search.html

@@ -15,6 +15,9 @@
         <p id='search-no-results' class='text-muted'>
           <em>{% trans "No search results" %}</em>
         </p>
+        <div id='search-results'>
+          <!-- Search results go here -->
+        </div>
       </div>
     </div>
 </div>