document.addEventListener(
'DOMContentLoaded',
function () {
const searchComponents =
document.querySelectorAll(
'.vendit-live-search'
);
searchComponents.forEach(
function ( component ) {
const input =
component.querySelector(
'.vendit-search-input'
);
const resultsBox =
component.querySelector(
'.vendit-search-results'
);
const clearButton =
component.querySelector(
'.vendit-search-clear'
);
let timer = null;
let controller = null;
function closeResults() {
resultsBox.classList.remove(
'is-open'
);
}
function openResults() {
resultsBox.classList.add(
'is-open'
);
}
function escapeHTML( value ) {
const div =
document.createElement(
'div'
);
div.textContent = value || '';
return div.innerHTML;
}
function searchProducts( query ) {
if ( controller ) {
controller.abort();
}
controller =
new AbortController();
resultsBox.innerHTML =
'
Searching VENDIT...
';
openResults();
const url =
'https://vendit.store/wp-admin/admin-ajax.php' +
'?action=vendit_product_search&q=' +
encodeURIComponent( query );
fetch(
url,
{
signal:
controller.signal
}
)
.then(
response =>
response.json()
)
.then(
response => {
if (
! response.success ||
! response.data.length
) {
resultsBox.innerHTML =
'
' +
'No close matches yet. Try another word.' +
'
';
return;
}
let html = '';
response.data.forEach(
product => {
html +=
'' +
'
' +
'

' +
'
' +
'
' +
'
' +
escapeHTML(
product.title
) +
'
' +
'
' +
(
product.seller
? 'by ' +
escapeHTML(
product.seller
)
: ''
) +
'
' +
'
' +
'
' +
product.price +
'
' +
'';
}
);
html +=
'';
resultsBox.innerHTML =
html;
}
)
.catch(
error => {
if (
error.name !==
'AbortError'
) {
resultsBox.innerHTML =
'
' +
'Search unavailable. Please try again.' +
'
';
}
}
);
}
input.addEventListener(
'input',
function () {
const query =
input.value.trim();
clearButton.style.display =
query.length
? 'block'
: 'none';
clearTimeout(
timer
);
if (
query.length < 2
) {
closeResults();
resultsBox.innerHTML =
'';
return;
}
timer =
setTimeout(
function () {
searchProducts(
query
);
},
275
);
}
);
clearButton.addEventListener(
'click',
function () {
input.value = '';
clearButton.style.display =
'none';
resultsBox.innerHTML = '';
closeResults();
input.focus();
}
);
document.addEventListener(
'click',
function ( event ) {
if (
! component.contains(
event.target
)
) {
closeResults();
}
}
);
input.addEventListener(
'focus',
function () {
if (
input.value.trim()
.length >= 2 &&
resultsBox.innerHTML
) {
openResults();
}
}
);
}
);
}
);