Create input field to set results count on the web interface

Resolves #96
This commit is contained in:
Debanjum Singh Solanky
2022-09-12 22:46:48 +03:00
parent 0ce0c00090
commit 13b5d5082f

View File

@@ -63,10 +63,11 @@
function search(rerank=false) { function search(rerank=false) {
query = document.getElementById("query").value; query = document.getElementById("query").value;
type = document.getElementById("type").value; type = document.getElementById("type").value;
results_count = document.getElementById("results-count").value || 6;
console.log(`Query: ${query}, Type: ${type}`); console.log(`Query: ${query}, Type: ${type}`);
url = type === "image" url = type === "image"
? `/search?q=${encodeURIComponent(query)}&t=${type}&n=6` ? `/search?q=${encodeURIComponent(query)}&t=${type}&n=${results_count}`
: `/search?q=${encodeURIComponent(query)}&t=${type}&n=6&r=${rerank}`; : `/search?q=${encodeURIComponent(query)}&t=${type}&n=${results_count}&r=${rerank}`;
fetch(url) fetch(url)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
@@ -131,6 +132,11 @@
// Dynamically populate type dropdown based on enabled search types and type passed as URL query parameter // Dynamically populate type dropdown based on enabled search types and type passed as URL query parameter
populate_type_dropdown(); populate_type_dropdown();
// Set results count field with value passed in URL query parameters, if any.
var results_count = new URLSearchParams(window.location.search).get("n");
if (results_count)
document.getElementById("results-count").value = results_count;
// Fill query field with value passed in URL query parameters, if any. // Fill query field with value passed in URL query parameters, if any.
var query_via_url = new URLSearchParams(window.location.search).get("q"); var query_via_url = new URLSearchParams(window.location.search).get("q");
if (query_via_url) if (query_via_url)
@@ -150,7 +156,9 @@
<!--Add Button To Regenerate --> <!--Add Button To Regenerate -->
<button id="regenerate" onclick="regenerate()">Regenerate</button> <button id="regenerate" onclick="regenerate()">Regenerate</button>
</div> <!--Add Results Count Input To Set Results Count -->
<input type="number" id="results-count" min="1" max="100" value="6" placeholder="results count">
</div>
<!-- Section to Render Results --> <!-- Section to Render Results -->
<div id="results"></div> <div id="results"></div>
@@ -200,7 +208,7 @@
#options { #options {
padding: 0; padding: 0;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr minmax(70px, 0.5fr);
} }
#options > * { #options > * {
padding: 15px; padding: 15px;
@@ -208,10 +216,10 @@
border: 1px solid #ccc; border: 1px solid #ccc;
} }
#options > select { #options > select {
margin-right: 5px; margin-right: 10px;
} }
#options > button { #options > button {
margin-left: 5px; margin-right: 10px;
} }
#query { #query {