When I search for something in my search bar, I want the number of results to be limited to 3, because otherwise it modifies the structure of the site.
This is what I’ve got so far.
Thank you in advance.
import wixData from 'wix-data';
let listSize;
let currIndex = -1;
$w.onReady(function () {
$w('#input1').onKeyPress((event) => {
setTimeout(() => {
if ($w('#input1').value.length === 0) {
currIndex = -1;
$w("#rptDropdown").collapse()
.then(() => {
console.log("Done with collapse");
});
} else {
switch (event.key) {
case "Enter":
$w('#input1').value = $w('#rptDropdown').data[currIndex].title;
$w("#rptDropdown").collapse()
.then(() => {
console.log("Done with collapse");
});
break;
case "ArrowLeft":
case "ArrowRight":
break;
case "ArrowUp":
if (currIndex > 0) {
currIndex -= 1;
refresh_repeater();
}
break;
case "ArrowDown":
if (currIndex < listSize - 1) {
currIndex += 1;
refresh_repeater();
}
break;
case "Escape":
$w('#input1').value = '';
currIndex = -1;
$w("#rptDropdown").collapse()
.then(() => {
console.log("Done with collapse");
});
break;
default:
currIndex = -1;
wixData.query("Destination")
.startsWith("title", $w('#input1').value)
.ascending("title")
.limit(5)
.find()
.then((res) => {
$w('#rptDropdown').data = [];
$w('#rptDropdown').data = res.items;
listSize = res.items.length;
$w('#rptDropdown').expand();
});
break;
}
}
}, 50)
});
});
export function rptDropdown_itemReady($item, itemData, index) {
$item('#name').text = itemData.title;
if (index === currIndex) {
$item("#rptBox").style.backgroundColor = HL_COLOR;
} else {
$item("#rptBox").style.backgroundColor = REG_COLOR;
}
$item('#container1').onClick(() => {
$w('#input1').value = itemData.title;
$w('#rptDropdown').collapse();
});
}
function refresh_repeater() {
$w("#rptDropdown").forEachItem(($item, itemData, index) => {
$item('#name').text = itemData.title;
if (index === currIndex) {
$item("#rptBox").style.backgroundColor = HL_COLOR;
} else {
$item("#rptBox").style.backgroundColor = REG_COLOR;
}
$item('#container1').onClick(() => {
$w('#input1').value = itemData.title;
$w('#rptDropdown').collapse();
});
});
}
export function name_click(event) {
}