add load more button on user request

Author: wiz64

assets/js/saavn-search.js

@@ -3,22 +3,32 @@ var results_objects = {};
 const searchUrl = "https://jiosaavn-api-privatecvc.vercel.app/search/songs?query=";
 function SaavnSearch() {
 event.preventDefault(); // stop page changing to #, which will reload the page
-
 var query = document.querySelector("#saavn-search-box").value.trim()
 query = encodeURIComponent(query);
 
 if(query==lastSearch) {doSaavnSearch(query)}
-    window.location.hash = query 
+    window.location.hash = lastSearch; 
 if(query.length > 0) { 
     window.location.hash = query 
 }
-}
 
-async function doSaavnSearch(query,NotScroll) {
+}
+var page_index = 1;
+function nextPage() {
+    var query = document.querySelector("#saavn-search-box").value.trim();
+    if (!query) {query = lastSearch;}
+    query = encodeURIComponent(query);
+    doSaavnSearch(query,0,true)
+}
+async function doSaavnSearch(query,NotScroll,page) {
+    window.location.hash = query;
     if(!query) {return 0;}
 results_container.innerHTML = `<span class="loader">Searching</span>`;
-    query=query+"&limit=50";
-
+    query=query+"&limit=40";
+    if(page) {
+        ;page_index=page_index+1;query=query+"&page="+page_index;
+    } else {query=query+"&page=1";page_index=1;}
+    
 // try catch
 try {
 var response = await fetch(searchUrl + query);
@@ -27,7 +37,6 @@ results_container.innerHTML = `<span class="error">Error: ${error} <br> Check if
 }
 var json = await response.json();
 /* If response code isn't 200, display error*/
-
 if (response.status !== 200) {
     results_container.innerHTML = `<span class="error">Error: ${json.message}</span>`;
     console.log(response)
@@ -127,3 +136,4 @@ $('#saavn-bitrate').on('change', function () {
         // Do Nothing
     } */
 });
+document.getElementById("loadmore").addEventListener('click',nextPage)

index.html

@@ -59,6 +59,7 @@ <h5 class="text-uppercase text-center" style="color: rgb(165,255,184);">Results<
                             <div class="text-left" id="saavn-results" style="margin-bottom: 20px;">
                                 <h5>Featured</h5>
                             </div>
+                            <div class="text-center" style="width:100%"><button id="loadmore" style="width: 100%;">Load More</button></div>
                             <div class="text-center" style="width: 95%;color: #ceea82;"><button class="btn btn-primary" type="button" style="background: rgba(0,0,0,0.1);color: #70cee2;font-size: 22px;font-family: Aclonica, sans-serif;padding: 02px;border-style: none;" onclick="doSaavnSearch('2022')">2022</button><button class="btn btn-primary" type="button" style="background: rgba(0,0,0,0.1);color: var(--white);font-size: 22px;font-family: Aclonica, sans-serif;padding: 02px;border-style: none;" onclick="doSaavnSearch('Arijit Singh')">Arijit Singh</button><button class="btn btn-primary" type="button" style="background: rgba(0,0,0,0.1);color: #ef2b2d;font-size: 22px;font-family: Aclonica, sans-serif;padding: 02px;border-style: none;" onclick="doSaavnSearch('english songs')">English Songs</button><button class="btn btn-primary" type="button" style="background: rgba(0,0,0,0.1);color: #23b805;font-size: 22px;font-family: Aclonica, sans-serif;padding: 02px;border-style: none;" onclick="doSaavnSearch('imran khan')">Imran Khan</button><button class="btn btn-primary" type="button" style="background: rgba(0,0,0,0.1);color: var(--primary);font-size: 22px;font-family: Aclonica, sans-serif;padding: 02px;border-style: none;" onclick="doSaavnSearch('dj snake')">DJ Snake</button><button class="btn btn-primary" type="button" style="background: rgba(0,0,0,0.1);color: #cee007;font-size: 18px;font-family: Aclonica, sans-serif;padding: 02px;border-style: none;" onclick="doSaavnSearch('darshan raval')">Darshan Raval</button><button class="btn btn-primary" type="button" style="background: rgba(0,0,0,0.1);color: #ff77a8;font-size: 18px;font-family: Aclonica, sans-serif;padding: 02px;border-style: none;" onclick="doSaavnSearch('akcent')">Akcent</button><button class="btn btn-primary" type="button" style="background: rgba(0,0,0,0.1);color: #21a9af;font-size: 18px;font-family: Aclonica, sans-serif;padding: 02px;border-style: none;" onclick="doSaavnSearch('jubin nautiyal')">Jubin Nautiyal</button><button class="btn btn-primary" type="button" style="background: rgba(0,0,0,0.1);color: var(--warning);font-size: 18px;font-family: Aclonica, sans-serif;padding: 02px;border-style: none;" onclick="doSaavnSearch('armaan malik')">Armaan Malik</button><button class="btn btn-primary" type="button" style="background: rgba(0,0,0,0.1);color: #e316e7;font-size: 18px;font-family: Aclonica, sans-serif;padding: 02px;border-style: none;" onclick="doSaavnSearch('old songs')">Old Songs</button></div>
                         </div>
                         <p class="footer" align="center">