RPeraltaJr
11/1/2017 - 8:45 AM

Search Filters

Keyword search, Select option dropdown and Multi-select checkboxes

app.js
content_copyfile_download
// Thanks Dev Coffee! :) 
// https://www.youtube.com/watch?v=VPUdtEf3oXI

var vm = new Vue({
    el: '#app',
    data: function() {
      return { 
        filter: '',
        sort: '',
        options: [
          { label: 'Default', value: 'none' },
          { label: 'Most Viewed', value: 'views' },
        ],
        checkedSports: [],
        sports: ['Baseball', 'Football', 'Basketball', 'Acting', 'Frogball', 'Singing']
        heroes: [
          { name: 'Magneta', sport: 'Baseball', views: 312},
          { name: 'RubberMan', sport: 'Football', views: 23121 },
          { name: 'Dynama', sport: 'Basketball', views: 231},
          { name: 'Dr IQ', sport: 'Acting', views: 443},
          { name: 'Magma', sport: 'Frogball', views: 403},
          { name: 'Tornado', sport: 'Singing', views: 8843}
        ],
        heroSelected: false,
        selectedHero: []
      }
    },
    methods: {
        viewHero(data) {
            console.log(data);
            this.heroSelected = true;
            this.selectedHero = data;
        }
    },
    computed: {
      getHeroes() {
        
        // For input query filtering
        var heroes = this.heroes.filter((hero) => {
            // return if it matches 'name' or 'sport'
            return hero.name.toLowerCase().includes(this.filter.toLowerCase()) + 
            hero.sport.toLowerCase().includes(this.filter.toLowerCase());
          });
        
        // For select dropdown filtering
        if (this.sort == 'views') {
          return heroes.sort(function(a, b) {
            return b.views - a.views
          });
        } else {
          return heroes;
        }
        
        // For multi-select checkbox filtering
        if (!this.checkedSports.length) { // if not selected
          return this.heroes; // return all heroes
        } else {
          return this.heroes.filter(i => this.checkedSports.includes(i.sport)) // filtered
        }
        
      }
    }
});
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="app.css">
  <script type="text/javascript" src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
  
</head>
<body>
    
    <div id="app">
      <div class="container">
    
        <div class="search-wrapper">

          <!-- Searchbar -->
          <input placeholder="Filter by keyword" v-model="filter">

          <!-- Select Option -->
          <select v-model="sort" placeholder="Sort by">
            <option value="" disabled selected>Sort by</option>
            <option v-for="item in options" :label="item.label" :value="item.value">
            </option>
          </select>
          
          <!-- Checkboxes -->
          <div v-for="sport in sports">
            <input type="checkbox" :id="sport" :value="sport" v-model="checkedSports" />
            <label :for="sport">{{ sport }}</label>
          </div>

        </div> 
        
        <ul>
          <li v-for="hero in getHeroes" @click="viewHero(hero)"> <!-- get 'hero' returned from 'getHeroes' function -->
            <h4 style="margin-bottom:0"> {{ hero.name }} </h4>
            <div> {{ hero.sport }} </div>
            <div> {{ hero.views }} views </div>
          </li>
        </ul>
        
        <div v-if="getHeroes.length === 0">
          <span> No Match Found</span>
        </div>

        <div v-if="heroSelected">
          <span> {{ selectedHero.name }}</span>
        </div>

    
      </div> <!-- container -->
    </div> <!-- #app -->
    
    <script src="app.js"></script>

</body>
</html>