Instant Search / Typehead With Vue.js Without Plugin

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.

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.

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.


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.

instant search vue js 1

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

HTML CODE:


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/'
      }
    ]
  },
  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;
    }
  }
});

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.

SHARE THIS ARTICLE

post-thumbnail
Today everyone knows the importance of a lightning-fast website and how the speed impacts the conversion rate of a business. Today, everyone wants the site to be a PWA so that the mobile users can have an app-like experience with the website because, for the majority of the merchants, the customers come through mobile devices.
Tue Apr 20 2021
post-thumbnail
Here we are going to see how you can manage backup and restore of Postgres database with docker.
Thu Sep 03 2020
post-thumbnail
Image sliders or carousels always have increased the UI attraction of websites and they are pretty useful for reflecting the major roles/products too. In case, I am having a website that sells tee-shirts,
Mon Apr 30 2018

About VoidCanvas

This blog was created out of hobby and talks mostly about technology, web development, JavaScript, NodeJS and related topics. Thank you for reading my blog.

Copyright 2022 - www.voidcanvas.com

Popular Articles

Authentication using Google's oAuth api with node.js

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.

CSS3 Loader Snippet Collection: (Part 2 - Squares)

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