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) {
query = document.getElementById("query").value;
type = document.getElementById("type").value;
results_count = document.getElementById("results-count").value || 6;
console.log(`Query: ${query}, Type: ${type}`);
url = type === "image"
? `/search?q=${encodeURIComponent(query)}&t=${type}&n=6`
: `/search?q=${encodeURIComponent(query)}&t=${type}&n=6&r=${rerank}`;
? `/search?q=${encodeURIComponent(query)}&t=${type}&n=${results_count}`
: `/search?q=${encodeURIComponent(query)}&t=${type}&n=${results_count}&r=${rerank}`;
fetch(url)
.then(response => response.json())
.then(data => {
@ -131,6 +132,11 @@
// Dynamically populate type dropdown based on enabled search types and type passed as URL query parameter
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.
var query_via_url = new URLSearchParams(window.location.search).get("q");
if (query_via_url)
@ -150,7 +156,9 @@
<!--Add Button To Regenerate -->
<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 -->
<div id="results"></div>
@ -200,7 +208,7 @@
#options {
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr minmax(70px, 0.5fr);
}
#options > * {
padding: 15px;
@ -208,10 +216,10 @@
border: 1px solid #ccc;
}
#options > select {
margin-right: 5px;
margin-right: 10px;
}
#options > button {
margin-left: 5px;
margin-right: 10px;
}
#query {