feat: Show Recent Searches

erpnext/templates/pages/product_search.py

@@ -71,7 +71,7 @@ def search(query):
 
 	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

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">

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 @@ searchBox.addEventListener("input", (e) => {
     }
 });
 
+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();