Autocomplete is not working on responsive search bar (#817)

GeoNode · Feb 10, 2022 · 54029c1 · 54029c1
1 parent 24d3221
commit 54029c1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 17 deletions.
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/brand_navbar.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/brand_navbar.html
@@ -43,7 +43,7 @@
             </div>
             <div class="gn-menu-content-center">
                 {% block center_menu %}
-                    {% include './search_bar.html' %}
+                    {% include './search_bar.html' with search_bar_id='gn-search-bar' %}
                 {% endblock %}
             </div>
             <div class="gn-menu-content-right">
@@ -60,7 +60,7 @@
 </nav>
 <div id="{{ id|default:'' }}-bottom">
     {% block bottom_menu %}
-        {% include './search_bar.html' %}
+        {% include './search_bar.html' with search_bar_id='gn-search-bar-bottom' %}
     {% endblock %}
 </div>
 {% block extra_script %}
@@ -84,4 +84,4 @@
             window.addEventListener('hashchange', manageUrlChange, false);
         })();
     </script>
-{% endblock extra_script %}
+{% endblock extra_script %}
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/search_bar.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/search_bar.html
@@ -1,10 +1,10 @@
-<div id="gn-search-bar" class="gn-search-bar">
+<div id="{{ search_bar_id }}" class="gn-search-bar">
     <div class="input-group">
         <div class="input-group-prepend">
-            <button id="gn-search-bar-clear" type="button" class="btn btn-default" style="display: none;">
+            <button id="{{ search_bar_id }}-clear" type="button" class="btn btn-default" style="display: none;">
                 <i class="fa fa-times"></i>
             </button>
-            <button id="gn-search-bar-apply" type="button" class="btn btn-default">
+            <button id="{{ search_bar_id }}-apply" type="button" class="btn btn-default">
                 <i class="fa fa-search"></i>
             </button>
         </div>
@@ -15,12 +15,12 @@
             style="outline: none; box-shadow: none;"
         >
         <div class="input-group-append">
-            <div id="gn-search-bar-loading" class="gn-spinner" style="visibility: hidden;"><div></div></div>
+            <div id="{{ search_bar_id }}-loading" class="gn-spinner" style="visibility: hidden;"><div></div></div>
         </div>
     </div>
     <div class="gn-suggestions" style="display: none;">
         <div class="gn-suggestions-header">
-            <button id="gn-search-bar-clear-suggestions" type="button" class="btn btn-default">
+            <button id="{{ search_bar_id }}-clear-suggestions" type="button" class="btn btn-default">
                 <i class="fa fa-times"></i>
             </button>
         </div>
@@ -36,14 +36,14 @@
             const debounceTime = 300;
             const scrollOffset = 200;
             const pageSize = 10;
-            const searchInput = document.querySelector('#gn-search-bar input');
-            const suggestionsPanel = document.querySelector('#gn-search-bar .gn-suggestions');
-            const suggestionsPanelList = document.querySelector('#gn-search-bar .gn-suggestions .list-group');
+            const searchInput = document.querySelector('#{{ search_bar_id }} input');
+            const suggestionsPanel = document.querySelector('#{{ search_bar_id }} .gn-suggestions');
+            const suggestionsPanelList = document.querySelector('#{{ search_bar_id }} .gn-suggestions .list-group');
 
-            const searchClear = document.querySelector('#gn-search-bar-clear');
-            const searchClearSuggestions = document.querySelector('#gn-search-bar-clear-suggestions');
-            const searchApply = document.querySelector('#gn-search-bar-apply');
-            const searchLoading = document.querySelector('#gn-search-bar-loading');
+            const searchClear = document.querySelector('#{{ search_bar_id }}-clear');
+            const searchClearSuggestions = document.querySelector('#{{ search_bar_id }}-clear-suggestions');
+            const searchApply = document.querySelector('#{{ search_bar_id }}-apply');
+            const searchLoading = document.querySelector('#{{ search_bar_id }}-loading');
 
             var request = null;
             var timeout = null;
@@ -235,5 +235,4 @@
 
         });
     })();
-</script>
-
+</script>