Please help, search bar

Ask the community
,
1

Please I need help, I have followed the wix tutorial and everything works apart from the search bar . What have I done wrong?

thanks

import wixData from “wix-data”;

$w.onReady(() => {
loadActivity();
});

let lastFilterTitle;
let lastFilterName;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value, lastFilterName);
}, 500);
}

export function iActivity_change(event, $w) {
filter(lastFilterTitle, $w(‘#iActivity’).value);
}

function filter(title, name) {
if (lastFilterTitle !== title || lastFilterName !== name) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains(‘locationTitle’, title);
if (name)
newFilter = newFilter.contains(‘name’, name);
$w(‘#dataset1’).setFilter(newFilter);
lastFilterTitle = title;
lastFilterName = name;
}
}

function loadActivity() {
wixData.query(‘Activity’)
.find()
.then(res => {
let options = [{“value”: ‘’, “label”: ‘All Activities’}];
options.push(…res.items.map(name => {
return {“value”: name.title, “label”: name.title};
}));
$w(‘#iActivity’).options = options;
});

}

1882×917 268 KB

1418×450 45.4 KB

1379×519 21.3 KB

2

Hi Elise

This looks like a massive amount of code for what should be a simple query. My suggestion:

export function iTitle_keyPress(event, $w) {
     if(event.key === 'Enter'){
          $w("#dataset1").setFilter( wixData.filter() 
          .contains("locationTitle", $w("#iActivity).value)
          );
     }
}

Good luck!
Tiaan

3

Thanks Tiann,

I have just tried this, with no success. The code I have made following the example from “How to create a search for your database”

with the instructions from here;

I have followed them but still cant get it to work, if you can look at this and tell me how that would be amazing!

This is what it looks like when using search bar and search drop down (see attache pictures)

1920×1440 378 KB

Thanks

Elise

4

When using Search bar

1907×929 44.6 KB

Thanks

Elise

5

Hi Elise

I probably should have mentioned, you will need to add the ‘onKeyPress’ on the input bar through the properties panel, and then add the following code in between the curly brackets. Have you done it that way?

Then make sure the key (locationTitle) is the same as your database field key and the input’s id is the same as your input’s id ( iActivity ) in case I might have mis spelled it…


if(event.key === 'Enter'){ 
$w("#dataset1").setFilter( wixData.filter() 
 .contains("locationTitle", $w("#iActivity).value) 
); 
}

Tiaan

6

Thanks,

yes I had the on Key press already and fields all match also. This is what it looks like now and the if event now has a red dot by it. It says not defined. I deleted the rest of my code so the drop down no longer works.

import wixData from ‘wix-data’;

export function iTitle_keyPress(event, $w) {
filter($w(‘#iTitle’).value);
}

function filter(title) {
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘locationTitle’, title));
}
if (event.key === ‘Enter’){
$w(“#dataset1”).setFilter( wixData.filter()
.contains(“locationTitle”, $w(“#iActivity”).value)
);
}

7

Ok, so remove all the above code and paste this in there:

import wixData from 'wix-data';  

export function iTitle_keyPress(event, $w) {  
if(event.key === 'Enter'){  
$w("#dataset1").setFilter( wixData.filter()   
.contains("locationTitle", $w("#iActivity").value)  
);  
}
}
8

Hi Tiaan,

I am sorry to say this has not worked either, thank you for your help so far though.

Elise