mirror of
https://github.com/meilisearch/MeiliSearch
synced 2024-11-23 05:14:27 +01:00
Introduce a basic front to display facets
This commit is contained in:
parent
2cd8675734
commit
a8e3269ad6
@ -1,5 +1,6 @@
|
||||
var request = null;
|
||||
var timeoutID = null;
|
||||
var selected_facets = {};
|
||||
|
||||
$('#query, #facet').on('input', function () {
|
||||
var query = $('#query').val();
|
||||
@ -20,7 +21,7 @@ $('#query, #facet').on('input', function () {
|
||||
}),
|
||||
contentType: 'application/json',
|
||||
success: function (data, textStatus, request) {
|
||||
results.innerHTML = '';
|
||||
documents.innerHTML = '';
|
||||
facets.innerHTML = '';
|
||||
|
||||
let timeSpent = request.getResponseHeader('Time-Ms');
|
||||
@ -30,16 +31,29 @@ $('#query, #facet').on('input', function () {
|
||||
time.classList.remove('fade-in-out');
|
||||
|
||||
for (facet_name in data.facets) {
|
||||
// Append an header to the list of facets
|
||||
let upperCaseName = facet_name.charAt(0).toUpperCase() + facet_name.slice(1);
|
||||
$("<h3></h3>").text(upperCaseName).appendTo($('#facets'));
|
||||
|
||||
// Create a div for a bulma select
|
||||
const header = document.createElement('div');
|
||||
let div = $("<div></div>").addClass('select is-multiple');
|
||||
|
||||
// Create the select element
|
||||
let select = $(`<select data-facet-name='${facet_name}' multiple size=\"8\"></select>`);
|
||||
for (value of data.facets[facet_name]) {
|
||||
const elem = document.createElement('span');
|
||||
elem.classList.add("tag");
|
||||
elem.setAttribute('data-name', facet_name);
|
||||
elem.setAttribute('data-value', value);
|
||||
elem.innerHTML = `${facet_name}:${value}`;
|
||||
facets.appendChild(elem);
|
||||
let option = $('<option></option>')
|
||||
.text(value)
|
||||
.attr('value', value)
|
||||
.attr('title', value);
|
||||
select.append(option);
|
||||
}
|
||||
|
||||
div.append(select);
|
||||
$('#facets').append(div);
|
||||
}
|
||||
|
||||
|
||||
for (element of data.documents) {
|
||||
const elem = document.createElement('li');
|
||||
elem.classList.add("document");
|
||||
@ -65,22 +79,16 @@ $('#query, #facet').on('input', function () {
|
||||
}
|
||||
|
||||
elem.appendChild(ol);
|
||||
results.appendChild(elem);
|
||||
documents.appendChild(elem);
|
||||
}
|
||||
|
||||
// When we click on a tag we append the facet value
|
||||
// at the end of the facet query.
|
||||
$('#facets .tag').on('click', function () {
|
||||
let name = $(this).attr("data-name");
|
||||
let value = $(this).attr("data-value");
|
||||
|
||||
let facet_query = $('#facet').val().trim();
|
||||
if (facet_query === "") {
|
||||
$('#facet').val(`${name} = "${value}"`).trigger('input');
|
||||
} else {
|
||||
$('#facet').val(`${facet_query} AND ${name} = "${value}"`).trigger('input');
|
||||
}
|
||||
// When we click on a facet value we change the global values
|
||||
// to make sure that we don't loose the selection between requests.
|
||||
$('#facets select').on('change', function(e) {
|
||||
let facet_name = $(this).attr('data-facet-name');
|
||||
selected_facets[facet_name] = $(this).val();
|
||||
});
|
||||
|
||||
},
|
||||
beforeSend: function () {
|
||||
if (request !== null) {
|
||||
|
@ -1,24 +1,5 @@
|
||||
#results {
|
||||
max-width: 900px;
|
||||
margin: 20px auto 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#facets .tag {
|
||||
margin-right: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#facets {
|
||||
max-width: 900px;
|
||||
margin: 20px auto 0 auto;
|
||||
padding: 0;
|
||||
max-height: 16em;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#facets .tag:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#logo-white {
|
||||
@ -80,14 +61,6 @@
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 65%;
|
||||
flex: 0 0 65%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
color: rgba(0,0,0,.9);
|
||||
}
|
||||
|
||||
.content mark {
|
||||
background-color: hsl(204, 86%, 88%);
|
||||
color: hsl(204, 86%, 25%);
|
||||
|
@ -84,14 +84,20 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="facets">
|
||||
<!-- facet values -->
|
||||
</section>
|
||||
<section id="results" class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth">
|
||||
<div id="facets" class="content">
|
||||
<!-- facets matching requests -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<ol id="results" class="content">
|
||||
<!-- documents matching requests -->
|
||||
</ol>
|
||||
<div class="column is-four-fifths">
|
||||
<ol id="documents" class="content">
|
||||
<!-- documents matching requests -->
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
Loading…
Reference in New Issue
Block a user