Simple yet powerful search mixins for vuejs
If you ever worked on a vuejs project, you surely one time build a list of data. And when you have this nice listing, you probably want to add a little search input on top. So that your users can type something and filter through the results.
The quick and easy way to do that is simply doing something like this:
<template>
<div>
<input type="search" v-model="search" />
<ul>
<li v-for="item in filteredItems" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ["banana", "carrot"],
search: "",
};
},
computed: {
filteredItems() {
return this.items.filter((i) => i.includes(this.search));
},
},
};
</script>
Now if we complicate things a little bit and use an array of objects, users for exemple, things might get a little bit more trickier. In the following example we will search through the firstName and the lastName of each user:
<template>
<div>
<input type="search" v-model="search" />
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.firstName }}
{{ item.lastName }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, firstName: "Clement", lastName: "Rigo" },
{ id: 2, firstName: "Bernard", lastName: "Werber" },
],
search: "",
};
},
computed: {
filteredItems() {
return this.items.filter((i) => {
return (
i.firstName.includes(this.search) || i.lastName.includes(this.search)
);
});
},
},
};
</script>
You maybe see already where I'm coming with this π
If we have an array of very large objects with tons of attribute that are all searchable, your script will get heavier and heavier.
This is why I made this simple mixins:
// /mixins/search.js
export default {
methods: {
searchHasResult (searchable, query) {
const terms = query ? query.split(' ') : []
const matches = []
let stop = false
terms.forEach((term) => {
const termResults = []
searchable.forEach((word) => {
if (word) {
const result = word
.toLowerCase()
.includes(term ? term.toLowerCase() : '')
if (result) { termResults.push(result) }
matches.push(result)
}
})
if (termResults.length === 0) {
stop = true
}
})
if (stop) {
return false
}
return matches.filter(m => m).length >= terms.length
}
}
}
Then in your vue components, update the filteredItems
computed method with :
filteredItems() {
return this.items.filter((item) => {
const searchable = [item.firstName, item.lastName]; // list all searchable strings here
return this.searchHasResult(searchable, this.searchTerm);
});
}
I consider myself as an IT Business Artisan. Or Consultant CTO. I'm a self-taught Web Developper, coach and teacher. My main work is helping and guiding digital startups.
more about meBTC
bc1qgw9a8hyqqwvcls9ln7vhql4mad0qkveutr2td7
ETH
0x3A720717Da03dB6f3c4a4Ff08BC64100205A79d0
2025 © My Dynamic Production SRL All rights Reserved.