hide results after result selected in search

Author: hmillersarah

jekyll-tipue-search/assets/tipuesearch/css/tipuesearch-component.css

@@ -41,8 +41,13 @@
 }
 
 /* TITLE */
+.tipue_search_content_title {
+     width: 100%;
+}
+
 .tipue_search_content_title a {
      color: black;
+     display: block;
      padding-left: 2em;
 }
 

jekyll-tipue-search/assets/tipuesearch/tipuesearch.min.js

@@ -620,5 +620,20 @@ function getTipueSearch(start, replace, set, searchResults, searchInputId, tipue
           description.classList.toggle('search_content_drop');
         });
     })
+
+    const results = shadow.querySelectorAll('.tipue_search_content_title');
+    const searchResultsBox = shadow.getElementById('search-results');
+    const searchInput = shadow.getElementById('search-input');
+    results.forEach(result => {
+      result.addEventListener('click', () => {
+        // Remove input value
+        searchInput.value = "";
+        const input = searchInput.value;
+        // Make search call
+        $(searchInput).tipuesearch(input, searchInput, searchResultsBox, 'web-component');
+        // Hide search results
+        searchResultsBox.style.display = 'none';
+      })
+    })
   }
 }

web-components/nav-header/nav-header.js

@@ -104,10 +104,15 @@ function createComponent(html) {
                 const input = searchInput.value;
                 // Make search call
                 $(searchInput).tipuesearch(input, searchInput, searchResults, 'web-component');
-                // Get dropdown search results
+                // Get search results
+                const results = shadow.querySelectorAll('.tipue_search_content_title');
+                results.forEach(result => {
+                    result.addEventListener('click', this.handleResultClick.bind(this));
+                })
+                // Get dropdowns from search results
                 const accordions = shadow.querySelectorAll('.cordion');
                 accordions.forEach(accordion => {
-                    accordion.addEventListener('click', this.handleResultsDropdown.bind(this));
+                    accordion.addEventListener('click', this.handleResultDropdown.bind(this));
                 })
             });
 
@@ -141,7 +146,7 @@ function createComponent(html) {
         }
 
         // Handle search result dropdown interaction
-        handleResultsDropdown(event) {
+        handleResultDropdown(event) {
             const button = event.target;
             const parent = button.parentElement;
             const grandparent = parent.parentElement;
@@ -161,6 +166,15 @@ function createComponent(html) {
             description.classList.toggle('search_content_drop');
         }
 
+        // Clear search after result is clicked
+        handleResultClick() {
+            const component = document.querySelector('nav-header');
+            const shadow = component.shadowRoot;
+            const searchResults = shadow.getElementById('search-results');
+            const searchInput = shadow.getElementById('search-input');
+            this.clearSearch(searchInput, searchResults);
+        }
+
         // Clear search
         clearSearch(searchInput, searchResults) {
             // Remove input value