Instant Search / Typehead With Vue.js Without Plugin

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.

instant search using vue js

Implementing Instant Search With Vue.js

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.

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.

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.

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.

instant search vue js 1

That’s it. Hopefully it will work perfectly. Below we are providing the whole code.


Vue.js Code:

How is it Working?

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.

About This Author

Exploring the web. In love with javascript & frontend development. Creative & Poorophobic.