Client side search in Vue 2

#javascript #tutorial #vue

So you have some data you want to filter? Or a cheeky little search bar and want to allow the user to search through an array.

In the following tutorial we will be using:

Vue 2 - https://vuejs.org/
Boostrap Vue - https://bootstrap-vue.org/

Ok so here goes.

So we have a basic Vue template with our normal set up.

<template>
  <div></div>
</template>
<script>
export default {
  computed: {},
  components: {},
  data() {
    return {};
  },
};
</script>

So I'm assuming you have some Vue experience and have knowledge of how to set up NPM and any other tools you need. So let's first create a search bar at the top of our page.

<template>
  <div>
    <div class="col-6 mb-3">
      <b-form>
        <label class="mr-sm-2" for="inline-form-custom-select-pref"
          >Search</label
        >
        <b-form-input
          id="inline-form-custom-select-pref"
          class="mb-2 mr-sm-2 mb-sm-0"
          :value="null"
          placeholder="Search for a company"
          v-model="search"
        ></b-form-input>
      </b-form>
    </div>
  </div>
</template>
<script>
export default {
  computed: {},
  components: {},
  data() {
    return {
        search: '',
        articles: []
    };
  },
};
</script>

So we have a search field and an empty data point for search which will use as the keyword in our search. Ok so I don't have to type out a huge array we will assume our collection has a list of objects inside with the following fields:

title
article
image
created_at

So we have a huge array of articles and we have a search field and an empty search data point. So what we can do now is create a computed property that will filter the array.

filteredArticles() {
            return this.articles.filter(blog => {
               return blog.title.toLowerCase().includes(this.title.toLowerCase());
            })
        }

So our computed property takes the full array, returns a named function that takes the title of each article and puts it to lower case, then takes our search term pops that to lower case and matches the two, if they match it returns it and if not discards it.

So how do we use our newly filtered list? Well if we have a Bootstrap table we can simply call in our filtered articles list as so:

<b-table
        striped
        hover
        :items="filteredArticles"
    >

And thats it, our search on the client side should work perfectly with all the data flowing through our computed property. Now I have not gone into much detail with the Bootstrap Vue side of things and if you need further information please use the link at the top that I have provided.

And here is the full file you can use and amend as you need:

<template>
  <div>
    <div class="col-6 mb-3">
      <b-form>
        <label class="mr-sm-2" for="inline-form-custom-select-pref"
          >Search</label
        >
        <b-form-input
          id="inline-form-custom-select-pref"
          class="mb-2 mr-sm-2 mb-sm-0"
          :value="null"
          placeholder="Search for a company"
          v-model="search"
        ></b-form-input>
      </b-form>
    </div>
    <b-table
        striped
        hover
        :items="filteredArticles"
    >
  </div>
</template>
<script>
export default {
  computed: {
    filteredArticles() {
      return this.articles.filter((blog) => {
        return blog.title.toLowerCase().includes(this.title.toLowerCase());
      });
    },
  },
  components: {},
  data() {
    return {
      search: "",
      articles: []
    };
  },
};
</script>