How to Display recent search history result when user click on search in vuejs?

Question

Here is my JS file

<div v-bind:class="{'open':openSuggestion}" class="search-bar">
    <input class="form-control bg-light-blue" id="SearchText"  type="text" v-model="search"
        @keydown.enter = 'enter'
        @input = 'change'
        @keyup="inputChanged"
        @keydown.down="onArrow"
        @keydown.up="onArrow"
    />
     <ul v-for="(user, i) in filteredUsers" :key="i" class="autocomplete-results"
      v-show="isOpen" :class="{ 'is-active': i === arrowCounter }">
      <li @click="setResult(user.text)">{{ user.text }}</li>
    </ul>
    <span v-if="isSearchText" class="close-icon" @click="clearSearch"></span>
    <!--<i class="fa fa-times-circle-o" aria-hidden="true"></i>-->
    </div>
    <button type="button" class="btn btn-primary search-icon">
        <i class="fa fa-search"></i>
    </button>
    </div>

export default {
    name: 'searchBar',
    data() {
        
        return {
            users: [{
                id: 1,
                text: "Stainlrs",
                done: false
              },
              {
                id: 2,
                text: "Alum Bars",
                done: false
              },
              {
                id: 3,
                text: "BrBars",
                done: true
              },
              {
                id: 4,
                text: "Oil",
                done: true
              }
            ],
            search: '',
            arrowCounter: -1,
            isOpen: false,
            filteredUsers: [],
        
            open: false,
            current: 0,
            value: '',
            isSearchText: false
    }
    },
 props: {
        suggestions: {
            type: Array,
            required: true
        },

        selection: {
            type: String,
            required: true,
            twoWay: true
        }
    },


    methods: {
        setResult(text) {
            this.search = text
          },
        enter() {
            this.selection = this.matches[this.current];
            this.open = false;
        },

    

        onArrow(event) {
            if (this.filteredUsers.length > 0) {
              this.arrowCounter = event.code == "ArrowDown" ? ++this.arrowCounter : --this.arrowCounter;
              if (this.arrowCounter >= this.filteredUsers.length)
                this.arrowCounter = (this.arrowCounter) % this.filteredUsers.length;
              else if (this.arrowCounter < 0)
                this.arrowCounter = this.filteredUsers.length + this.arrowCounter;
              this.setResult(this.filteredUsers[this.arrowCounter].text);
            }
          },

          inputChanged(event) {
            if (event.code == "ArrowUp" || event.code == "ArrowDown")
              return;
      
            this.filteredUsers = [];
      
            if (event.code == "Enter")
              return;
      
            var filtered = this.users.filter((user) => {
              return user.text.match(this.search)
            });
      
            this.isOpen = true
            this.filteredUsers.push(...filtered)
      
      
            // console.log(this.filteredUsers)
          },

      
    
        change() {
            if (this.open == false) {
                this.open = true;
                this.current = 0;
            }
            
            
            if(this.search == "") {
                this.isSearchText = false;
            } else {
                this.isSearchText = true;
            }
            
        },

    

        clearSearch(i) {
            if(this.search != "" ){
                this.search = "";
                document.getElementById("SearchText").value = "";
                this.isSearchText = false;
            }
            
        }
    }
  };

I Am creating a search filter using vue js, my current problem is, i want to display data from recentSearch history,Instead of showing all json data in recentSearch.

when i start typing it will retrieve filter data from json and if i click on search then it has to display the recent search history.

Answer 1

I would recommend using localStorage so your searches will persist between sessions. That way you can access it easily from any part of the app. it's useful if it's the only data you need to save for later. Every time you search, you add the search text to an array that gets saved to localStorage, which you can look up when you need, so you can limit the amount of data you look for in the search history.

methods: {
    onEnter: function () {
      let storedSearches = this.storedSearches;
      if (!storedSearches.includes(this.input)) {
        storedSearches.push(this.input);
        localStorage.storedSearches = JSON.stringify(storedSearches);
      }
    },
  },
  computed: {
    storedSearches: function () {
      return localStorage.storedSearches === undefined
        ? []
        : [...JSON.parse(localStorage.storedSearches)];
    },
  },

Answer 2

My main target is to do INPUT tag Autocomplete Solutions in VUEJS.

I solved that by using the HTML <datalist/> tag and VUEjs Client-Side Storage.

1. VueJS Code

<b-col sm="5" md="6" class="my-1">
<b-input-group>
 <b-form-input v-model="filter" name="filter" list="my-list-id" type="search"
                      placeholder="MAWB NO ...">
 </b-form-input>
 <datalist id="my-list-id">
      <option v-for="size in storedSearches">{{ size }}</option>
 </datalist>
 <b-input-group-append>
   <b-button :disabled="!filter" @click="addStoredSearches">Search</b-button>
 </b-input-group-append>
</b-input-group>
</b-col>

2. Script code -

data: () => ({
    filter: null
}),
computed: {
        storedSearches: function () {
            return localStorage.storedSearches === undefined
                ? []
                : [...JSON.parse(localStorage.storedSearches)];
        },
    },
methods: {
    addStoredSearches() {
        let storedSearches = this.storedSearches;
        if (!storedSearches.includes(this.filter)) {
        storedSearches.unshift(this.filter);
        localStorage.storedSearches = JSON.stringify(storedSearches);
        }
    }
}

Document: https://v2.vuejs.org/v2/cookbook/client-side-storage.html https://www.w3schools.com/tags/tag_datalist.asp