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

<!-- component template -->
<script type="text/x-template" id="grid-template">
  <table>
    <thead>
      <tr>
        <th v-for="key in columns"
          @click="sortBy(key)"
          :class="{active: sortKey == key}">
          {{key | capitalize}}
          <span class="arrow"
            :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="
        entry in data
        | filterBy filterKey
        | orderBy sortKey sortOrders[sortKey]">
        <td v-for="key in columns">
          {{{entry[key] | highlight filterKey}}}
        </td>
      </tr>
    </tbody>
  </table>
</script>

<!-- product root element -->
<div id="product">
  <form id="search">
    Search <input name="query" v-model="searchQuery">
  </form>
  <product-grid
    :data="gridData"
    :columns="gridColumns"
    :filter-key="searchQuery">
  </product-grid>
</div>

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 ('<span class=\'highlight\'>' + matchedTxt + '</span>');
    });
});

// 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 :

• Jobs
• Make Money
• Programming

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.