Vue js is an excellent framework. It's main beauty lies in its reactivity. Its reactivity can be used to solve many problems from the frontend without having to write additional routes on backend api. This post demonstrates how can we use vue js reactivity to make an instant search as you type using the filter method in computed property. There are few things you should know about vue js before jumping into this post.
- Vue reactivity
- Vue lifecycle
- Http request using axios
- Rest API (also Fake Rest API)
I am writing this blog for future reference for myself but in the meantime it could be useful for anyone, especially beginners like me.
Now, lets make an instant search input box to filter data that comes from Lorem Picsum Web API.
The Lorem Picsum web API gives response in following format.
| [ |
| { |
| "id": "10", |
| "author": "Paul Jarvis", |
| "width": 2500, |
| "height": 1667, |
| "url": "https://unsplash.com/photos/6J--NXulQCs", |
| "download_url": "https://picsum.photos/id/10/2500/1667" |
| }, |
| { |
| "id": "100", |
| "author": "Tina Rataj", |
| "width": 2500, |
| "height": 1656, |
| "url": "https://unsplash.com/photos/pwaaqfoMibI", |
| "download_url": "https://picsum.photos/id/100/2500/1656" |
| } |
| ]
The Web API returns a JSON array that represents a list of images with an URL,
an author, and an ID. Those are the properties that will define our application
model.
Then, we develop a simple application skeleton, with a header, an input text box,
a list of images, and author names.
Lets create our html file and put everything into it:
<div class="main">
<div class="input-container">
<input
type="text"
placeholder="Type a name"
v-model="authorNameSearchString"
/>
</div>
<li class="photo" v-for="photo in filteredPhotoFeed" v-bind:key="photo.id">
<img v-bind:src="photo.download_url" />
<span class="author">{{ photo.author }}</span>
</li>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var instasearchApp = new Vue({
el: ".main",
data() {
return {
authorNameSearchString: "",
photoFeed: null,
};
},
mounted() {
axios
.get("https://picsum.photos/v2/list?page=2&limit=10")
.then((response) => {
this.photoFeed = response.data;
})
.catch((error) => console.log(error));
},
computed: {
filteredPhotoFeed: function () {
var photos = this.photoFeed;
var authorNameSearchString = this.authorNameSearchString;
if (!authorNameSearchString) {
return photos;
}
searchString = authorNameSearchString.trim().toLowerCase();
photos = photos.filter(function (item) {
if (
item.author.toLowerCase().indexOf(authorNameSearchString) !== -1
) {
return item;
}
});
return photos;
},
},
});
</script>
There are actually two ways of filtering the data. You can choose either of them according to your need.
authorNameSearchString = authorNameSearchString.toLowerCase();
//method 1
photos = photos.filter(function (item) {
return item.author.toLowerCase().includes(authorNameSearchString);
/* To choose only the photos with an author that’s contained within the search string.
The indexOf() method returns the first index at which a given element can be found
in the array, or -1 if it is not present.
*/
});
//method 2
photos = photos.filter(function (item) {
if (item.author.toLowerCase().indexOf(authorNameSearchString) !== -1) {
return item;
}
});
|
Comments
Post a Comment