dynamic page loading

templates/text.html

@@ -56,7 +56,7 @@
         </select>        
         <button class="results-save" name="t" value="text">Apply settings</button>
     </form>    
-    <div class="results">
+    <div class="results" id="results">
         {{if .Results}}
             {{range .Results}}
                 <div class="result_item">
@@ -70,7 +70,7 @@
             <div class="no-results">No results found for '{{ .Query }}'. Try different keywords.</div>
         {{end}}
     </div>
-    <div class="prev-next prev-img">
+    <div class="prev-next prev-img" id="prev-next">
         <form action="/search" method="get">
             <input type="hidden" name="q" value="{{ .Query }}">
             <input type="hidden" name="t" value="text">
@@ -83,8 +83,35 @@
         </form>
     </div>
     <script>
-        // Check if JavaScript is enabled and modify the DOM accordingly
         document.getElementById('content').classList.remove('js-enabled');
+
+        document.addEventListener("DOMContentLoaded", function() {
+            if (document.getElementById('prev-next')) {
+                document.getElementById('prev-next').style.display = 'none';
+
+                let page = {{ .Page }};
+                const query = "{{ .Query }}";
+
+                function loadResults(newPage) {
+                    fetch(`/search?q=${encodeURIComponent(query)}&t=text&p=${newPage}`)
+                        .then(response => response.text())
+                        .then(data => {
+                            const parser = new DOMParser();
+                            const doc = parser.parseFromString(data, 'text/html');
+                            const newResults = doc.getElementById('results').innerHTML;
+                            document.getElementById('results').innerHTML += newResults;
+                            page = newPage;
+                        })
+                        .catch(error => console.error('Error loading results:', error));
+                }
+
+                window.addEventListener('scroll', () => {
+                    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+                        loadResults(page + 1);
+                    }
+                });
+            }
+        });
     </script>
 </body>
 </html>