Posted inTechnology / JavaScript / VueJs

Vue Instant Search Example Demo

Today, We want to share with you Vue Instant Search Example Demo.In this post we will show you algolia vue instant search 2, hear for Integrating Algolia InstantSearch with Vue.js we will give you demo and example for implement.In this post, we will learn about Instant Search / Typehead With Vue.js Without Plugin with an example.

Vue Instant Search Example Demo

There are the Following The simple About VueJS Instant Search Example Demo Full Information With Example and source code.

As I will cover this Post with live Working example to develop algolia instant search documentation, so the algolia instant search in Vue.js for this example is following below.

Step 1: Add CDN

Include vuejs libs

https://cdn.jsdelivr.net/vue/1.0.24/vue.js

Step 2: HTML part

index.html





Step :3 Javascript part

main.js

// register the grid component
Vue.component('product-grid', {
  template: '#grid-template',
  props: {
    data: Array,
    columns: Array,
    filterKey: String
  },
  data: function () {
    var sortOrders = {}
    this.columns.forEach(function (key) {
      sortOrders[key] = 1
    })
    return {
      sortKey: '',
      sortOrders: sortOrders
    }
  },
  methods: {
    sortBy: function (key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    }
  }
})

// highlight filter
Vue.filter('highlight', function(words, query){
    var iQuery = new RegExp(query, "ig");
    return words.toString().replace(iQuery, function(matchedTxt,a,b){
        return ('' + matchedTxt + '');
    });
});

// bootstrap the product
var product = new Vue({
  el: '#product',
  data: {
    searchQuery: '',
    gridColumns: ['name', 'price'],
    gridData: [
      { name: 'Iphone +65', price: Infinity },
      { name: 'Bike 589', price: 9000 },
      { name: 'Laptop z570', price: 7000 },
      { name: 'Mobile', price: 8000 }
    ]
  }
})

CSS Part

body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
}

table {
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}

th {
  background-color: #42b983;
  color: rgba(255,255,255,0.66);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -user-select: none;
}

td {
  background-color: #f9f9f9;
}

th, td {
  min-width: 120px;
  padding: 10px 20px;
}

th.active {
  color: #fff;
}

th.active .arrow {
  opacity: 1;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}

#search {
  margin-bottom: 10px;
}

.highlight {
    background-color: yellow;
}
Algolia InstantSearch.js Product Search
Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vue.js simple Instant Search Example with Demo.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype