Hi there,
I have a repeater linked to my database with a search box that works fine.
My issue is that the search only works for the words in the very same order.
I am using .contains so I don't understand why words have to be in the exact same order a my value in my "title" text field from my database.
Here's an example:
If I search "Bollinger Grande Année", it won't display an item called "Bollinger La Grande Année" (title) as results.
Here's my page: https://www.grandsvinsdechampagne.com/champagnes-blanc-de-blancs
Here is my code:
import wixData from 'wix-data';
// Sorting Price ascending/descending
$w.onReady(function() {
$w('#dropdown1').onChange(() => {
if ($w('#dropdown1').value === 'du - cher au + cher') {
$w("#dataset1").setSort(
wixData.sort()
.ascending("priceRangeNumber")
);
}
else if ($w('#dropdown1').value === 'du + cher au - cher') {
$w("#dataset1").setSort(
wixData.sort()
.descending("priceRangeNumber")
);
}
});
});
// Sorting Millésime (Vintage) + Format Dropdown Filters
$w.onReady(() => {
loadMillesime();
loadFormat();
});
let lastFilterTitle;
let lastFilterMillesime;
let lastFilterFormat;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w('#iTitle').value, lastFilterMillesime,lastFilterFormat);
}, 500);
}
export function iMillesime_change(event, $w) {
filter(lastFilterTitle, $w('#iMillesime').value, lastFilterFormat);
}
export function iFormat_change(event, $w) {
filter(lastFilterTitle, lastFilterMillesime, $w('#iFormat').value);
}
function filter(title, millesime, format) {
if (lastFilterTitle !== title ||
lastFilterMillesime !== millesime ||
lastFilterFormat !== format) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains('title', title);
if (millesime)
newFilter = newFilter.contains('millesime', millesime);
if (format)
newFilter = newFilter.contains('format', format);
$w('#dataset1').setFilter(newFilter);
lastFilterTitle = title;
lastFilterMillesime = millesime;
lastFilterFormat = format;
}
}
function loadMillesime() {
wixData.query('All_Millesimes')
.find()
.then(res => {
let options = [{"value": '', "label": 'Tous les Millésimes'}];
options.push(...res.items.map(millesime => {
return {"value": millesime.value, "label": millesime.millesime};
}));
$w('#iMillesime').options = options;
});
}
function loadFormat() {
wixData.query('All_Formats')
.find()
.then(res => {
let options = [{"value": '', "label": 'Tous les Formats'}];
options.push(...res.items.map(format => {
return {"value": format.value, "label": format.title};
}));
$w('#iFormat').options = options;
});
}
// Links on image + CTA Products
$w.onReady(function () {
$w('#repeater1').onItemReady( ($w, itemData, ) => {
$w('#link').html= "<a href=" + itemData.hyperlink + " target='_blank' style='text-decoration:underline;'>" + itemData.name +"</a>";
});
});
// Search Click Button
export function button11_click(event, $w) {
}
export function searchButton_onClick(event) {
console.log($w('#iTitle').value);
filter($w('#iTitle').value);
}
// Search Enter Key
$w.onReady(function () {
$w("#iTitle").onKeyPress((event, $w) => {
if (event.key === "Enter") {
console.log($w('#iTitle').value);
filter($w('#iTitle').value);
}
});
});
// Charger Plus (Load More)
export function button10_click(event, $w) {
$w("#dataset1").loadMore();
}
export function anchor1_viewportEnter(event, $w) {
$w("#button10").show("FadeIn");
}
export function anchor1_viewportLeave(event) { //Add your code for this event here: } I really need to be able to search the words, whatever the order.
Many thanks in advance for your help! :)
Have a great weekend all!
Corentin