feat: Show Recent Searches
This commit is contained in:
parent
34f3a6629f
commit
4309239d6c
@ -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
|
||||
|
@ -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">
|
||||
|
@ -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();
|
Loading…
x
Reference in New Issue
Block a user