var configuration = {
searchableFields: ['title', 'tags', 'actors'],
sortings: {
name_asc: {
field: 'name',
order: 'asc'
}
},
aggregations: {
tags: {
title: 'Tags',
size: 10
},
actors: {
title: 'Actors',
size: 10
},
genres: {
title: 'Genres',
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,
}
},
methods: {
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
})
return result
}
}
});
<script src="https://cdn.rawgit.com/itemsapi/itemsapi-example-data/master/jsfiddle/imdb.js"></script>
<script src="https://cdn.rawgit.com/itemsapi/itemsjs/master/dist/itemsjs.js"></script>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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="row">
<div class="col-md-2 col-xs-2">
<div v-for="facet in searchResult.data.aggregations">
<h5 style="margin-bottom: 5px;"><strong style="color: #337ab7;">{{ facet.title }}</strong></h5>
<ul class="browse-list list-unstyled long-list" style="margin-bottom: 0;">
<li v-for="bucket in facet.buckets">
<div class="checkbox block" style="margin-top: 0; margin-bottom: 0;">
<label>
<!--<input class="checkbox" type="checkbox" v-on:click="updateFilters(facet.name, bucket.key)" v-model="filters[bucket.key]" value="{{ bucket.key }}" v-bind:value="isChecked2()">-->
<!--<input class="checkbox" type="checkbox" v-on:click="updateFilters(facet.name, bucket.key)" v-model="filters[bucket.key]" v-bind:value="bucket.key">-->
<input class="checkbox" type="checkbox" v-model="filters[facet.name]" v-bind:value="bucket.key">
{{ bucket.key }} ({{ bucket.doc_count }})
</label>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-10 col-xs-10">
<div class="breadcrumbs"></div>
<div class="clearfix"></div>
<!--<h3>List of items ({{ searchResult.pagination.total }})</h3>-->
<table class="table table-striped">
<tbody>
<tr v-for="item of searchResult.data.items">
<td><img style="width: 100px;" v-bind:src="item.image"></td>
<td></td>
<td>
<b>{{ item.name }}</b>
<br />
{{ item.description }}
</td>
<td></td>
<td>
<span style="font-size: 12px; display: block; float: left; background-color: #dbebf2; border-radius: 5px; padding: 1px 3px 1px 3px; margin: 2px;" v-for="tag in item.tags">{{ tag }}</span>
</td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
<div class="clearfix" style="margin-bottom: 100px;"></div>
</div>
</div>
</div>