Thu Apr 05 2018
Paul Shan
I think instant search is one of the most common technique we experience everyday. It makes filtering items more convenient and easier. In case you aren’t familiar with the term, instant search is a technique which helps predict what you are looking for and provide you with the results instantly. The same concept works when you search something in google and get results accordingly as you keep typing.
Vue.js is a very easy to use and rapidly growing javascript framework which makes it pretty simple to develop an instant search. So, anyone willing to add an instant search option using Vue.js can follow this article and hopefully it won’t take more than 10 minutes to understand the logic behind it.
Before you jump into the main topic make sure you are having a decent amount of idea related to the use of Vue.js.
Okay, so Let’s get started.
Project: Assume that we are developing a page for an online library (not plugin) where people may search if the book is available in the library list or not.
The above section is the basic structure of our HTML code. vue.js
is the actual vue and vuefile.js
is the javascript file where we will be adding our vue.js code.
var app = new Vue({
el: '#app',
data: {
heading: 'VoidCanvas Online Library',
heading_Color: 'headingColor',
booksFontSize: 'booksFontSize',
author: 'author',
searchString: '',
books: [
{
title: 'Elon Musk',
by: 'Ashlee Vance',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Steve Jobs',
by: 'George Llian',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Face of Facebook',
by: 'Sandip Paul',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Tim Cook',
by: 'Andy Atkins',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Abdul Kalam',
by: 'Arun Tiwari',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Story of Elon Musk',
by: 'BP John',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Story of Bill Gates',
by: 'Russel Crook',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Becoming Steve Jobs',
by: 'Andrew Russel',
url: 'http://www.voidcanvas.com/'
}
]
}
});
In this above instance we are providing values to our objects. You can easily understand the use of the property according to its name.
The searchString
property is an empty string where your searched keyword will be stored.
book
is an array of objects having the list of all the available books. In real life projects most probably you will be using ajax here but right now for simplicity and better understanding we are using an array.
Now let’s design the UI.
{{heading}}
Okay, another long piece of code but quite simple to understand. We have added some styles to make it look good which has nothing to do with the instant search functionality.
The v-bind:class=""
is a way of binding classes in vue.js. We have used it couple of times here in order apply the CSS properties to the classes.
The v-model
directive provides two way binding.
, here you are instructing what ever input the user will provide make it bound to the
searchString
.
Next, we are dynamically adding the list of all the books available using v-for
directive. Low let’s take a look how the filteredBooks
array is working.
computed: {
filteredBooks: function () {
var books_array = this.books,
searchString = this.searchString;
if (!searchString) {
return books_array;
}
searchString = searchString.trim().toLowerCase();
books_array = articles_array.filter(function (item) {
if (item.title.toLowerCase().indexOf(searchString) !== -1) {
return item;
}
});
return books_array;
}
}
filteredBooks
is a computed property. The function here is helping us generate the probable book list.
if(!searchString)
, this means if the searchString
is empty the function will get the return value books_array
with all the available books. And when the searchString
will get some value it will filter the the whole list of the books and produce results accordingly.
That’s it. Hopefully it will work perfectly. Below we are providing the whole code.
{{heading}}
var app = new Vue({
el: '#app',
data: {
heading: 'VoidCanvas Online Library',
heading_Color: 'headingColor',
booksFontSize: 'booksFontSize',
author: 'author',
searchString: '',
books: [
{
title: 'Elon Musk',
by: 'Ashlee Vance',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Steve Jobs',
by: 'George Llian',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Face of Facebook',
by: 'Sandip Paul',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Tim Cook',
by: 'Andy Atkins',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Abdul Kalam',
by: 'Arun Tiwari',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Story of Elon Musk',
by: 'BP John',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Story of Bill Gates',
by: 'Russel Crook',
url: 'http://www.voidcanvas.com/'
},
{
title: 'Becoming Steve Jobs',
by: 'Andrew Russel',
url: 'http://www.voidcanvas.com/'
}
]
},
computed: {
filteredBooks: function () {
var books_array = this.books,
searchString = this.searchString;
if (!searchString) {
return books_array;
}
searchString = searchString.trim().toLowerCase();
books_array = books_array.filter(function (item) {
if (item.title.toLowerCase().indexOf(searchString) !== -1) {
return item;
}
});
return books_array;
}
}
});
Instant search using vue is pretty simple, credit goes to vue. Behind the scene it is taking care of a lot of things. If the input box is empty vue is providing all the book lists but when you put something in the input box, vue understands there has been some change in the data and updates the data and its related values, methods or computed properties accordingly.
Hope you are left with no doubt. In case you have any query, please comment below.
SHARE THIS ARTICLE
Thu Mar 10 2016
OAuth authentications are pretty popular now a days and another thing which is popular is JavaScript. This article shows how to plugin google’s oAuth api for authentication in your own node application.Sat Mar 01 2014
This is a continuation of my CSS3 loader snippet collection series. I've provided spinning css3 animation loader in the part 1 of this series and here in part 2, I'm providing various square type loading