searchengines-web/MeiliSearch
searchengines-web/MeiliSearch
1
0
Fork 0
mirror of https://github.com/meilisearch/MeiliSearch synced 2024-11-26 14:54:27 +01:00
Code Issues Releases Wiki Activity

Make the front-end to throttle the request by 100ms

Browse Source
This commit is contained in:
Kerollmops 2020-08-31 13:34:35 +02:00
parent 4afc4d0751
commit 220ba0785c
No known key found for this signature in database
GPG Key ID: 92ADA4E935E71FA4
1 changed files with 51 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
public/script.js
View File

@ -1,59 +1,68 @@
var request = null; var request = null;
var timeoutID = null;
$('#search').on('input', function () { $('#search').on('input', function () {
var query = $(this).val(); var query = $(this).val();
request = $.ajax({ var timeoutMs = 100;
type: "POST",
url: "query",
contentType: 'application/json',
data: JSON.stringify({ 'query': query }),
contentType: 'application/json',
success: function (data, textStatus, request) {
let httpResults = Papa.parse(data, { delimiter: ",", header: true, skipEmptyLines: true });
results.innerHTML = '';
let timeSpent = request.getResponseHeader('Time-Ms'); if (timeoutID !== null) {
let numberOfDocuments = httpResults.data.length; window.clearTimeout(timeoutID);
count.innerHTML = `${numberOfDocuments}`; }
time.innerHTML = `${timeSpent}ms`;
time.classList.remove('fade-in-out');
for (element of httpResults.data) { timeoutID = window.setTimeout(function () {
const elem = document.createElement('li'); request = $.ajax({
elem.classList.add("document"); type: "POST",
url: "query",
contentType: 'application/json',
data: JSON.stringify({ 'query': query }),
contentType: 'application/json',
success: function (data, textStatus, request) {
let httpResults = Papa.parse(data, { delimiter: ",", header: true, skipEmptyLines: true });
results.innerHTML = '';
const ol = document.createElement('ol'); let timeSpent = request.getResponseHeader('Time-Ms');
let numberOfDocuments = httpResults.data.length;
count.innerHTML = `${numberOfDocuments}`;
time.innerHTML = `${timeSpent}ms`;
time.classList.remove('fade-in-out');
for (const prop in element) { for (element of httpResults.data) {
const field = document.createElement('li'); const elem = document.createElement('li');
field.classList.add("field"); elem.classList.add("document");
const attribute = document.createElement('div'); const ol = document.createElement('ol');
attribute.classList.add("attribute");
attribute.innerHTML = prop;
const content = document.createElement('div'); for (const prop in element) {
content.classList.add("content"); const field = document.createElement('li');
content.innerHTML = element[prop]; field.classList.add("field");
field.appendChild(attribute); const attribute = document.createElement('div');
field.appendChild(content); attribute.classList.add("attribute");
attribute.innerHTML = prop;
ol.appendChild(field); 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)
} }
elem.appendChild(ol); },
results.appendChild(elem) beforeSend: function () {
} if (request !== null) {
request.abort();
}, time.classList.add('fade-in-out');
beforeSend: function () { }
if (request !== null) { },
request.abort(); });
time.classList.add('fade-in-out'); }, timeoutMs);
}
},
});
}); });
// Make the number of document a little bit prettier // Make the number of document a little bit prettier