MeiliSearch/http-ui/public/script.js

83 lines
2.3 KiB
JavaScript

var request = null;
var timeoutID = null;
$('#query, #facet').on('input', function () {
var query = $('#query').val();
var facet = $('#facet').val();
var timeoutMs = 100;
if (timeoutID !== null) {
window.clearTimeout(timeoutID);
}
timeoutID = window.setTimeout(function () {
request = $.ajax({
type: "POST",
url: "query",
contentType: 'application/json',
data: JSON.stringify({ 'query': query, 'facetCondition': facet }),
contentType: 'application/json',
success: function (data, textStatus, request) {
results.innerHTML = '';
let timeSpent = request.getResponseHeader('Time-Ms');
let numberOfDocuments = data.length;
count.innerHTML = `${numberOfDocuments}`;
time.innerHTML = `${timeSpent}ms`;
time.classList.remove('fade-in-out');
for (element of data) {
const elem = document.createElement('li');
elem.classList.add("document");
const ol = document.createElement('ol');
for (const prop in element) {
const field = document.createElement('li');
field.classList.add("field");
const attribute = document.createElement('div');
attribute.classList.add("attribute");
attribute.innerHTML = prop;
const content = document.createElement('div');
content.classList.add("content");
content.innerHTML = element[prop];
field.appendChild(attribute);
field.appendChild(content);
ol.appendChild(field);
}
elem.appendChild(ol);
results.appendChild(elem);
}
},
beforeSend: function () {
if (request !== null) {
request.abort();
time.classList.add('fade-in-out');
}
},
});
}, timeoutMs);
});
// Make the number of document a little bit prettier
$('#docs-count').text(function(index, text) {
return parseInt(text).toLocaleString()
});
// Make the database a little bit easier to read
$('#db-size').text(function(index, text) {
return filesize(parseInt(text))
});
// We trigger the input when we load the script, this way
// we execute a placeholder search when the input is empty.
$(window).on('load', function () {
$('#query').trigger('input');
});