feat: Show Recent Searches
diff --git a/erpnext/templates/pages/product_search.py b/erpnext/templates/pages/product_search.py
index c6f04df..732d8f9 100644
--- a/erpnext/templates/pages/product_search.py
+++ b/erpnext/templates/pages/product_search.py
@@ -71,7 +71,7 @@
ac = AutoCompleter(make_key(WEBSITE_ITEM_NAME_AUTOCOMPLETE), conn=red)
client = Client(make_key(WEBSITE_ITEM_INDEX), conn=red)
- suggestions = ac.get_suggestions(query, num=10)
+ suggestions = ac.get_suggestions(query, num=10, fuzzy=len(query) > 4)
# Build a query
query_string = query
diff --git a/erpnext/www/all-products/search.html b/erpnext/www/all-products/search.html
index a86a9c0..735822d 100644
--- a/erpnext/www/all-products/search.html
+++ b/erpnext/www/all-products/search.html
@@ -14,10 +14,13 @@
<div class="input-group mb-3">
<input type="text" name="query" id="search-box" class="form-control" placeholder="Search for products..." aria-label="Product" aria-describedby="button-addon2">
<div class="input-group-append">
- <button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
+ <button class="btn btn-outline-secondary" type="button" id="search-button">Search</button>
</div>
</div>
+<!-- To show recent searches -->
+<div class="my-2" id="recent-search-chips"></div>
+
<div class="row mt-2">
<!-- Search Results -->
<div class="col-sm">
diff --git a/erpnext/www/all-products/search.js b/erpnext/www/all-products/search.js
index c97e48b..cb3f9af 100644
--- a/erpnext/www/all-products/search.js
+++ b/erpnext/www/all-products/search.js
@@ -1,9 +1,48 @@
let loading = false;
+const MAX_RECENT_SEARCHES = 4;
+
const searchBox = document.getElementById("search-box");
+const searchButton = document.getElementById("search-button");
const results = document.getElementById("results");
const categoryList = document.getElementById("category-suggestions");
const showBrandLine = document.getElementById("show-brand-line");
+const recentSearchArea = document.getElementById("recent-search-chips");
+
+function getRecentSearches() {
+ return JSON.parse(localStorage.getItem("recent_searches") || "[]");
+}
+
+function attachEventListenersToChips() {
+ const chips = document.getElementsByClassName("recent-chip");
+
+ for (let chip of chips) {
+ chip.addEventListener("click", () => {
+ searchBox.value = chip.innerText;
+
+ // Start search with `recent query`
+ const event = new Event("input");
+ searchBox.dispatchEvent(event);
+ searchBox.focus();
+ });
+ }
+}
+
+function populateRecentSearches() {
+ let recents = getRecentSearches();
+
+ if (!recents.length) {
+ return;
+ }
+
+ html = "Recent Searches: ";
+ for (let query of recents) {
+ html += `<button class="btn btn-secondary btn-sm recent-chip mr-1">${query}</button>`;
+ }
+
+ recentSearchArea.innerHTML = html;
+ attachEventListenersToChips();
+}
function populateResults(data) {
html = ""
@@ -64,3 +103,29 @@
}
});
+searchButton.addEventListener("click", (e) => {
+ let query = searchBox.value;
+ if (!query) {
+ return;
+ }
+
+ let recents = getRecentSearches();
+
+ if (recents.length >= MAX_RECENT_SEARCHES) {
+ // Remove the `First` query
+ recents.splice(0, 1);
+ }
+
+ if (recents.indexOf(query) >= 0) {
+ return;
+ }
+
+ recents.push(query);
+
+ localStorage.setItem("recent_searches", JSON.stringify(recents));
+
+ // Refresh recent searches
+ populateRecentSearches();
+});
+
+populateRecentSearches();
\ No newline at end of file