Search history but with autocomplete

src/components/SearchFilters.vue

@@ -506,7 +506,6 @@ export default {
   position: relative;
   float: left;
   padding-right: 15px;
-  padding-bottom: 12px;
 }
 
 .number-shown-select {

src/components/SearchHistory.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <!-- <span v-if="reversedSearchHistory.length > 0" class="title"> Search History </span> -->
+    <template v-for="(item, i) in reversedSearchHistory">
+      <el-tag class="search-tag" v-if="i < 3" v-bind:key="i" @click="search(item)">{{ item.search }} </el-tag>
+    </template>
+    <el-select  
+      v-if="reversedSearchHistory.length > 0" 
+      :value="selectValue" 
+      class="m-2 search-select" 
+      placeholder="Full search History" 
+      size="small"
+      popper-class="sidebar-search-select-popper"
+      @change="selectChange"
+    >
+      <el-option
+        v-for="(item, i) in cascaderOptions"
+        :key="i"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import {
+  Tag,
+  Select,
+} from "element-ui";
+
+Vue.use(Tag);
+Vue.use(Select);
+import EventBus from './EventBus';
+
+// remove duplicates by stringifying the objects
+const removeDuplicates = function(arrayOfAnything){
+  return [...new Set(arrayOfAnything.map(e => JSON.stringify(e)))].map(e => JSON.parse(e)) 
+}
+
+export default {
+  name: 'SearchHistory',
+  data() {
+      return {
+        searchHistory: [],
+        selectValue: 'Full search history'
+      }
+
+  },
+  computed: {
+    reversedSearchHistory: function(){
+      return removeDuplicates(this.searchHistory.slice().reverse().filter(item => item.search !== ''))
+    },
+    cascaderOptions: function(){
+      return this.reversedSearchHistory.map(item => {
+        return {
+          value: item.search,
+          label: item.search
+        }
+      })
+    }
+  },
+  methods: {
+    getSearchHistory() {
+      if (localStorage.getItem('sparc.science-sidebar-search-history')) {
+        this.searchHistory = JSON.parse(localStorage.getItem('sparc.science-sidebar-search-history'));
+      } else {
+        this.searchHistory = [];
+      }
+    },
+    clearSearchHistory() {
+      localStorage.removeItem('sparc.science-sidebar-search-history');
+      this.searchHistory = [];
+    },
+    addSearchToHistory(filters, search) {
+      filters = [] // disable filters for now
+      let searchHistory = JSON.parse(localStorage.getItem('sparc.science-sidebar-search-history'));
+      if (searchHistory) {
+        searchHistory.push({filters: filters, search: search});
+        this.searchHistory = removeDuplicates(searchHistory)
+        localStorage.setItem('sparc.science-sidebar-search-history', JSON.stringify(searchHistory));
+      } else {
+        localStorage.setItem('sparc.science-sidebar-search-history', JSON.stringify([{filters: filters, search: search}]));
+      }
+    },
+    search: function(item) {
+      this.$emit("search", item);
+    },
+    selectChange: function(value) {
+      this.selectValue = value;
+      this.search({search: value})
+    }
+  },
+  mounted: function () {
+    this.getSearchHistory();
+    EventBus.$on('search-changed', (data) => {
+      this.setSearchHistory(data);
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/tag";
+
+.container {
+}
+
+.search-tag {
+  margin: 0 5px 5px 0;
+  cursor: pointer;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-right: 5px;
+  // center text vertically
+  display: flex;
+  align-items: center;
+
+}
+
+.search-select {
+  float: right;
+}
+</style>
+
+<style lang="scss">
+.sidebar-search-select-popper {
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #292b66;
+}
+</style>

src/components/SidebarContent.vue

@@ -1,14 +1,15 @@
 <template>
   <el-card :body-style="bodyStyle" class="content-card">
     <div slot="header" class="header">
-      <el-input
+      <el-autocomplete
         class="search-input"
         placeholder="Search"
+        :fetch-suggestions="fetchSuggestions"
         v-model="searchInput"
         @keyup.native="searchEvent"
         clearable
         @clear="clearSearchClicked"
-      ></el-input>
+      ></el-autocomplete>
       <el-button class="button" @click="searchEvent">Search</el-button>
     </div>
     <SearchFilters
@@ -21,6 +22,7 @@
       @loading="filtersLoading"
       @cascaderReady="cascaderReady"
     ></SearchFilters>
+    <search-history ref="searchHistory" @search="searchHistorySearch"></search-history>
     <div class="content scrollbar" v-loading="loadingCards" ref="content">
       <div class="error-feedback" v-if="results.length === 0 && !loadingCards">
         No results found - Please change your search / filter criteria.
@@ -57,10 +59,12 @@ import {
   Input,
   Loading,
   Pagination,
+  Autocomplete
 } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 import SearchFilters from "./SearchFilters";
+import SearchHistory from "./SearchHistory";
 import DatasetCard from "./DatasetCard";
 import EventBus from "./EventBus";
 
@@ -75,6 +79,7 @@ Vue.use(Icon);
 Vue.use(Input);
 Vue.use(Loading);
 Vue.use(Pagination);
+Vue.use(Autocomplete);
 
 // handleErrors: A custom fetch error handler to recieve messages from the server
 //    even when an error is found
@@ -106,7 +111,7 @@ var initial_state = {
 };
 
 export default {
-  components: { SearchFilters, DatasetCard },
+  components: { SearchFilters, DatasetCard, SearchHistory },
   name: "SideBarContent",
   props: {
     visible: {
@@ -207,11 +212,32 @@ export default {
       this.searchInput = "";
       this.resetPageNavigation();
       this.searchAlgolia(this.filters, this.searchInput);
+      this.$refs.searchHistory.selectValue = 'Full search history'
     },
     searchEvent: function (event = false) {
       if (event.keyCode === 13 || event instanceof MouseEvent) {
         this.resetPageNavigation();
         this.searchAlgolia(this.filters, this.searchInput);
+        this.$refs.searchHistory.selectValue = 'Full search history'
+        this.$refs.searchHistory.addSearchToHistory(this.filters, this.searchInput);
+      }
+    },
+    fetchSuggestions: function (queryString, callback) {
+      if (queryString.length > 0) {
+        this.algoliaClient
+          .search(getFilters(this.filters), queryString, 10, 1)
+          .then((searchData) => {
+            callback(
+              searchData.items.map((item) => {
+                return {
+                  value: item.name,
+                  label: item.name,
+                };
+              })
+            );
+          });
+      } else {
+        callback([]);
       }
     },
     filterUpdate: function (filters) {
@@ -408,6 +434,11 @@ export default {
     getAlgoliaFacets: async function(){
       let facets = await this.algoliaClient.getAlgoliaFacets(facetPropPathMapping)
       return facets;
+    },
+    searchHistorySearch: function(item){
+      this.searchInput = item.search;
+      this.filters = item.filters;
+      this.openSearch(item.filters, item.search);
     }
   },
   mounted: function () {