diff --git a/addon/components/labs-search.hbs b/addon/components/labs-search.hbs index 7150164..a0d085b 100644 --- a/addon/components/labs-search.hbs +++ b/addon/components/labs-search.hbs @@ -5,6 +5,7 @@ @value={{this.searchTerms}} {{on 'focus' (action 'handleFocusIn')}} {{on 'blur' (action 'handleFocusOut')}} + autocomplete="off" /> @@ -24,18 +25,37 @@ onmouseleave={{action 'handleHoverOut'}}> {{#each-in (group-by "typeTitle" this.currResults) as |type rows|}}
  • -

    {{type}}

    + + {{#if (eq type "Search History")}} +
    +

    {{type}}

    + + Clear History + +
    + + {{else}} +

    {{type}}

    + {{/if}}
  • {{#each rows key='label' as |result|}} -
  • - {{#if this.hasBlock}} - {{yield (hash result=result)}} - {{else}} - {{result.label}} + role="button" style="display: flex; flex-direction: row; justify-content: space-between;"> +
    + {{#if this.hasBlock}} + {{yield (hash result=result)}} + {{else}} + {{result.label}} + {{/if}} +
    + {{#if (eq type "Search History")}} + + + {{/if}}
  • + {{/each}} {{/each-in}} diff --git a/addon/components/labs-search.js b/addon/components/labs-search.js index eccc8c2..a5ce95c 100644 --- a/addon/components/labs-search.js +++ b/addon/components/labs-search.js @@ -65,6 +65,10 @@ export default Component.extend({ host: 'https://search-api-production.herokuapp.com', route: 'search', + useSearchHistory: false, + + searchHistory: window.localStorage["search-history"] ? JSON.parse(window.localStorage["search-history"]) : [], + searchPlaceholder: 'Search...', searchTerms: '', selected: 0, @@ -72,8 +76,14 @@ export default Component.extend({ loading: null, + filteredSearchHistory: [], + debouncedResults: task(function* (searchTerms) { - if (searchTerms.length < 2) return; + this.send('filterSearchHistory', searchTerms) + if (searchTerms.length < 2) { + this.set('currResults', this.filteredSearchHistory); + return; + } yield timeout(DEBOUNCE_MS); const URL = this.endpoint; @@ -94,7 +104,7 @@ export default Component.extend({ return mutatedResult; }); - this.set('currResults', mergedWithTitles); + this.set('currResults', this.filteredSearchHistory.concat(mergedWithTitles)); this.set('loading', null); return mergedWithTitles; @@ -158,6 +168,7 @@ export default Component.extend({ }, goTo(result) { + this.send('addSearchToSearchHistory', result) const el = document.querySelector('.map-search-input'); const event = document.createEvent('HTMLEvents'); event.initEvent('blur', true, false); @@ -190,5 +201,36 @@ export default Component.extend({ handleHoverOut() { this.onHoverOut(); }, + + saveSearchHistory() { + window.localStorage["search-history"] = JSON.stringify(this.searchHistory.slice(0, 100)) + }, + + addSearchToSearchHistory(result) { + if(this.useSearchHistory) { + const h = [...this.searchHistory].filter((search) => search.label !== result.label); + this.set('searchHistory', [{...result, typeTitle: "Search History"}, ...h]); + this.send('saveSearchHistory'); + } + }, + + removeSearchFromSearchHistory(result) { + this.set('searchHistory', [...this.searchHistory].filter((search) => search.label !== result.label)); + this.send('saveSearchHistory'); + this.set('currResults', [...this.currResults].filter((curr) => curr.label !== result.label)); + }, + + clearSearchHistory() { + this.set('searchHistory', []); + this.send('saveSearchHistory'); + this.set('currResults', [...this.currResults].filter((search) => search.typeTitle !== "Search History")) + }, + + filterSearchHistory(query) { + if(this.useSearchHistory) { + const h = [...this.searchHistory].filter((search) => search.label.toUpperCase().includes(query.toUpperCase())).slice(0, 5); + this.set('filteredSearchHistory', h) + } + }, }, });