Home » Vue Instant Search Example Demo

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 :

Read Also:  Ng-Options to Bind DropdownList using Angular Example

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Inline Editing Table using jQuery Ajax
  2. Read Also:  jQuery AJAX Multiple Files Upload using PHP
  3. Read Also:  Display Image Preview Before Upload Multiple Images using jQuery,Ajax And PHP
  4. Read Also:  Eloquent Right Join Queries in Laravel Example
  5. Read Also:  Creating jQuery Animation Effects using Inbuilt Methods
  6. Read Also:  jQuery Fly to cart Effect
  7. Read Also:  Simple JQuery Ajax Request Example with Laravel 6
  8. Read Also:  How to get last inserted id in Laravel
  9. Read Also:  vue-scrollto smooth scroll vuejs example
  10. Read Also:  Display Image Preview Before Upload Multiple Images using jQuery,Ajax And PHP

Leave a Comment

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