add pagination and load more results button

canonical · Feb 3, 2025 · 7d0ca9e · 7d0ca9e
1 parent ed672fe
commit 7d0ca9e
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 17 deletions.
diff --git a/templates/docs/search.html b/templates/docs/search.html
@@ -35,22 +35,23 @@ <h1 class="p-heading--2">
       We've found these results for your search: <strong>"{{ query }}"</strong>
     </h1>
     <ul class="p-list">
-      {% for result in sorted_results[:20] %}
-      <li class="p-list__item">
-        <h5>
-          <a href="{{ result.url }}" target="_blank">
-            {{ result.title }}
-          </a>&nbsp;
-          {% set search_path = "search.html" if result.domain in ["pythonlibjuju.readthedocs.io", "ops.readthedocs.io"]
-          else "search/" %}
-          <a href="https://{{ result.domain }}/en/latest/{{ search_path }}?q={{ query }}" target="_blank" class="p-chip is-inline">
-            <span class="p-chip__value">{{ domain_info.get(result.domain, {}).get("title", result.domain) }}</span>
-          </a>
-        </h5>
-        <p>{{ result.short_content }}</p>
-      </li>
+      {% for result in sorted_results %}
+        <li class="p-list__item search-result" style="{% if loop.index > 10 %}display: none;{% endif %}">
+          <h5>
+            <a href="{{ result.url }}" target="_blank">
+              {{ result.title }}
+            </a>&nbsp;
+            {% set search_path = "search.html" if result.domain in ["pythonlibjuju.readthedocs.io", "ops.readthedocs.io"]
+            else "search/" %}
+            <a href="https://{{ result.domain }}/en/latest/{{ search_path }}?q={{ query }}" target="_blank" class="p-chip is-inline">
+              <span class="p-chip__value">{{ domain_info.get(result.domain, {}).get("title", result.domain) }}</span>
+            </a>
+          </h5>
+          <p>{{ result.short_content }}</p>
+        </li>
       {% endfor %}
     </ul>
+    <button id="load-more-button" class="p-button" onclick="loadMoreResults()">Load more results</button>
   </div>
 </section>
 {% else %}
@@ -80,5 +81,37 @@ <h3>Still no luck?</h3>
   </div>
 </section>
 {% endif %}
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    let visibleResults = 10;
+    const loadMoreButton = document.getElementById("load-more-button");
+
+    window.loadMoreResults = function () {
+      if (!loadMoreButton) return;
+
+      loadMoreButton.innerText = "Loading...";
+      loadMoreButton.disabled = true;
+
+      setTimeout(() => {
+        const results = document.querySelectorAll('.search-result');
+        let count = 0;
+
+        for (let i = visibleResults; i < results.length && count < 10; i++) {
+          results[i].style.display = "block";
+          count++;
+        }
+        visibleResults += count;
+
+        if (visibleResults >= results.length) {
+          loadMoreButton.style.display = "none";
+        } else {
+          loadMoreButton.innerText = "Load more";
+          loadMoreButton.disabled = false;
+        }
+      }, 500);
+    };
+  });
+</script>
 {% endblock content %}
 
diff --git a/webapp/docs/search.py b/webapp/docs/search.py
@@ -127,10 +127,10 @@ def calculate_relevance(result, query):
     return (title_score + content_score + how_to_boost) * domain_multiplier
 
 
-def process_and_sort_results(results, query, max_length=200, limit=20):
+def process_and_sort_results(results, query, max_length=200):
     """
     Merge, truncate, and sort search results based on relevance,
-    limiting to top 20 results.
+    returning all results for frontend pagination.
     """
     processed_results = []
 
@@ -166,4 +166,4 @@ def process_and_sort_results(results, query, max_length=200, limit=20):
 
     return sorted(
         processed_results, key=lambda x: x["relevance_score"], reverse=True
-    )[:limit]
+    )