My JavaScript file is displayed below:
<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 currently developing a search filter using Vue.js. One issue I am facing is that I want to display recent search history instead of showing all JSON data in the recent search section.
When I begin typing, the filter should retrieve data from JSON and upon clicking the search button, it should display the recent search history.