ItemsJS

ItemsJS - movies demo

by cigol

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="https://cdn.rawgit.com/itemsapi/itemsapi-example-data/master/jsfiddle/imdb.js"></script>
<script src="https://unpkg.com/[email protected]/dist/itemsjs.min.js"></script>
  <div id="el">
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#" v-on:click="reset()">ItemsJS movies</a>
        </div>
        <div id="navbar">
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" v-model="query" class="form-control" placeholder="Search">
            </div>
          </form>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container" style="margin-top: 50px;">

      <h1>List of items ({{ searchResult.pagination.total }})</h1>

      <p class="text-muted">Search performed in {{ searchResult.timings.search }} ms, facets in {{ searchResult.timings.facets }} ms</p>

      <div class="breadcrumbs" style="margin: 0 0 10px 0; " v-if="selected_filters.length">

        <span v-for="filter in selected_filters" class="label label-default" v-on:click="remove_filter(filter.facet, filter.name)" style="margin-right: 5px; cursor: pointer;">{{ filter.name }}
          <span class="glyphicon glyphicon-remove"></span>
        </span>

        <span class="label label-default pull-right" v-on:click="reset()" style="cursor: pointer; margin-right: 0;">Clear filters
          <span class="glyphicon glyphicon-remove"></span>
        </span>

      </div>

      <div class="clearfix"></div>

      <div class="" style="margin-bottom: 10px;">
        <select class="form-control pull-left" style="width: auto; margin-top: 0px;"...

JavaScript

var configuration = {
  searchableFields: ['title', 'tags', 'actors', 'category', 'genres', 'description'],
  sortings: {
    name_asc: {
      field: 'name',
      order: 'asc'
    },
    name_desc: {
      field: 'name',
      order: 'desc'
    },
    year_asc: {
      field: 'year',
      order: 'asc'
    },
    year_desc: {
      field: 'year',
      order: 'desc'
    }
  },
  aggregations: {
    tags: {
      title: 'Tags',
      size: 10
    },
    actors: {
      title: 'Actors',
      size: 10
    },
    genres: {
      title: 'Genres',
      conjunction: false,
      size: 10
    }
  }
}

// the rows comes from external resources
// https://github.com/itemsapi/itemsapi-example-data/blob/master/jsfiddle/imdb.js
itemsjs = itemsjs(rows, configuration);

var vm = new Vue({
  el: '#el',
  data: function () {

    // making it more generic
    var filters = {};
    Object.keys(configuration.aggregations).map(function(v) {
      filters[v] = [];
    })

    return {
      query: '',
      // initializing filters with empty arrays
      filters: filters,
      selected_filters: [],
      sort_keys: Object.keys(configuration.sortings),
      sort: '',
      per_page: 10
    }
  },
  methods: {

    remove_filter: function (facet, name) {
      this.filters[facet] = this.filters[facet].filter(v => {
        return v !== name;
      });
    },

    reset: function () {
      var filters = {};
      Object.keys(configuration.aggregations).map(function(v) {
        filters[v] = [];
      })

      this.filters = filters;
      this.query = '';
    }
  },
  computed: {
    searchResult: function () {

      var result = itemsjs.search({
        query: this.query,
        filters: this.filters,
        per_page: this.per_page,
        sort: this.sort
      })

      // creating selected filters flat array
      this.selected_filters = [];
      for (const [key, value] of Object.entries(this.filters)) {

        for (const name in value) {
         ...