Search Function on database

Ask the community
,
1

Hi i just found this video Wix Code | How to Create a Search for Your Database - YouTube and i would like to recreate on my site, this is the code i entered but doesn’t work. please help…

import wixData from “wix-data”; $w.onReady(() => { wixData.query(‘Continents’) .find() .then(res => { let options = [{“value”: ‘’, ‘label’: ‘All Continents’}]; options.push(…res.items.map(continent => { return {‘value’: ‘label’" continent.title}; })); $w(‘#iContinent’).options = options; ]} }); let lastFilterTitle; let lastFilterContinent; let debounceTimer; export function iTitle_keyPress () { if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = undefined; } debounceTimer = setTimeout(() => { filter($w(‘#iTitle’).value, lastFilterContinent); }, 200,); } function filter(title,continent) { if (lastFilterTitle !== title) || lastFilterContinent !== continent) { let newFilter = wixData.filter(); if (title) newFilter = newFilter.contains(‘articleTitle’, title); if (continent) newFilter = newFilter.eq(‘continent’, continent); $w(‘#dataset1’).setfilter(newFilter); lastFilterTitle = title; lastFilterContinent = continent; } } export function iContinent_change(); filter(lastFilterTitle, $w(‘#iContinent’).value);

2

Hi Luca,
This code is not readable in this format.
Please elaborate what is the scenario and what you would like to achieve.
Roi

3

I need to replicate the example from the video above, basically a search + filter for database using the repeater. i am not very good with code but some more example would be very helpful i think.
Regarding the code somebody gave this code: Totally Codable - Trusted Velo Community. Thanks.

4

Hi Luca,
Which part of the code is not working ? Can you more specific ?
Roi

5

1920×1000 178 KB

I am trying to send you a screenshot but not luck, cannot upload any file…

6

You can paste here a link to your site and explain.
Roi

7

I uploaded the screenshot, that’s the link https://lucasgariglia.wixsite.com/wixcode

8

Hi again,
The code that you copied from the link above has many syntax errors.
I recommend to follow the tutorial and to write it on your own.
That way you’ll better understand the code.
Moreover, you need to adapt is to your elements a database collections name.

Roi

9

Is it possible to get an example from that video so i can inspect in the editor how the database was set with all the elements ?

10

Good luck!

import wixData from 'wix-data';

$w.onReady(() => {
	wixData.query('Continents')
		.find()
		.then(res => {
			let options = [{
				"value": '',
				'label': 'All Continents'
			}];
			options.push(...res.items.map(continent => {
				return {
					'value': continent.title,
					'label': continent.title
				};
			}));
			$w('#iContinent').options = options;
		});
});

let lastFilterTitle;
let lastFilterContinent;

let debounceTimer;
export function iTitle_keyPress(event, $w) {
	if (debounceTimer) {
		clearTimeout(debounceTimer);
		debounceTimer = undefined;
	}
	debounceTimer = setTimeout(() => {
		filter($w('#iTitle').value, lastFilterContinent);
	}, 200)
}

function filter(title, continent) {
	if (lastFilterTitle !== title || lastFilterContinent !== continent) {
		let newFilter = wixData.filter();
		if (title)
			newFilter = newFilter.contains('articleTitle', title);
		if (continent)
			newFilter = newFilter.contains('continent', continent);
		$w('#dataset1').setFilter(newFilter);
		lastFilterTitle = title;
		lastFilterContinent = continent;
	}
}
export function iContinent_change(event, $w) {
	filter(lastFilterTitle, $w('#iContinent').value);
}
11

Thanks, i will give it a try…

12

Still no luck the video doesn’t explain in details how to set the repeater and the database…

13

Hi Luca,
There is lots of information in this forum and the help center .
This tutorial will help to connect the repeater to the database collection.
Roi

14

I configured and connected the repeater but still nothing, how about the drop down elements, ho w do i need to name them? Not very Helpful i start to be frustrated as i wix user i know almost nothing to code!!!
What i ask here to create this scenario as an example in the resources page as i learned a lot from there, but like this i am like blind…

15

Hi,
Some coding skill are required in order to make it done.
You can hire an expert in Wix Arena .
Did you connect the elements inside the repeater to the dataset ?
Roi

16

Hi Roi,

I am having some trouble filtering dynamic content as well. I am just having issues populating the dropdown box with the items in the collection. The search function works as shown but I am unable to populate the dropdown choice with the ones on the collection and add a ALL option as well. Not sure what to do. Here is the link of the page. https://midknightgenius.wixsite.com/lara/collection

The dropdown list only contains the default items.

17

Hi There,
I am also facing the issue with dropdown.
Can you please help me with this

18

The Search command is working for me. I built a simple database, copy and pasted this code and when I type in a value into the search bar nothing filters.

import wixData from ‘wix-data’;
$w.onReady( function () {
//TODO: write your page related code here…
});
export function input1_keyPress(event) {
let SearchValue = $w(‘#input1’).value;
$w(‘#dataset1’).setFilter(wixData.Filter().contains(‘pos’, ‘SearchValue’))
}