Reflect updates to query and results count in URL

- Simplify tracking khoj query history, saving/sharing links
- Do not execute search, when query only contains whitespaces
  - Prevents error when try process results of empty query
This commit is contained in:
Debanjum Singh Solanky 2022-09-13 23:39:24 +03:00
parent 34314e859a
commit 1680a617da

View file

@ -61,13 +61,26 @@
} }
function search(rerank=false) { function search(rerank=false) {
query = document.getElementById("query").value; // Extract required fields for search from form
query = document.getElementById("query").value.trim();
type = document.getElementById("type").value; type = document.getElementById("type").value;
results_count = document.getElementById("results-count").value || 6; results_count = document.getElementById("results-count").value || 6;
console.log(`Query: ${query}, Type: ${type}`); console.log(`Query: ${query}, Type: ${type}`);
// Short circuit on empty query
if (query.length === 0)
return;
// If set query field in url query param on rerank
if (rerank)
setQueryFieldInUrl(query);
// Generate Backend API URL to execute Search
url = type === "image" url = type === "image"
? `/search?q=${encodeURIComponent(query)}&t=${type}&n=${results_count}` ? `/search?q=${encodeURIComponent(query)}&t=${type}&n=${results_count}`
: `/search?q=${encodeURIComponent(query)}&t=${type}&n=${results_count}&r=${rerank}`; : `/search?q=${encodeURIComponent(query)}&t=${type}&n=${results_count}&r=${rerank}`;
// Execute Search and Render Results
fetch(url) fetch(url)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
@ -122,12 +135,24 @@
}); });
} }
function setTypeInQueryParam(type) { function setTypeFieldInUrl(type) {
var url = new URL(window.location.href); var url = new URL(window.location.href);
url.searchParams.set("t", type.value); url.searchParams.set("t", type.value);
window.history.pushState({}, "", url.href); window.history.pushState({}, "", url.href);
} }
function setCountFieldInUrl(results_count) {
var url = new URL(window.location.href);
url.searchParams.set("n", results_count.value);
window.history.pushState({}, "", url.href);
}
function setQueryFieldInUrl(query) {
var url = new URL(window.location.href);
url.searchParams.set("q", query);
window.history.pushState({}, "", url.href);
}
window.onload = function () { window.onload = function () {
// 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();
@ -152,13 +177,13 @@
<div id="options"> <div id="options">
<!--Add Dropdown to Select Query Type --> <!--Add Dropdown to Select Query Type -->
<select id="type" onchange="setTypeInQueryParam(this)"></select> <select id="type" onchange="setTypeFieldInUrl(this)"></select>
<!--Add Button To Regenerate --> <!--Add Button To Regenerate -->
<button id="update" onclick="updateIndex()">Update</button> <button id="update" onclick="updateIndex()">Update</button>
<!--Add Results Count Input To Set Results Count --> <!--Add Results Count Input To Set Results Count -->
<input type="number" id="results-count" min="1" max="100" value="6" placeholder="results count"> <input type="number" id="results-count" min="1" max="100" value="6" placeholder="results count" onchange="setCountFieldInUrl(this)">
</div> </div>
<!-- Section to Render Results --> <!-- Section to Render Results -->