Hi,
I watched the video “How to create a search for your database” (published on 30 Jan 2018). I tried to implement it partially on my site (https://bhimsen.wixswite/jayahtml) which is a recipes site. I created a page where I added repeater element. Linked it to my database receipeCollection where one of the columns is ‘veg’ which contains the name of the vegetable used in that recipe. I added a user input text box (ID: iTitle) and added the following code:
import wixData from “wix-data”;
let lastFilterTitle;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value);
}, 200);
}
function filter(title) {
if (lastFilterTitle !== title) {
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘veg’, title));
lastFilterTitle = title;
}
}
But this is not working for me. Will somebody please help me. Thank you.
What isn’t working? What results are you getting? Are there error messages in the console?
As I start typing in the search box the search results should start narrowing down, but nothing happens. All the repeater items stay put on the screen! I’ve tried replacing the repeater with a table. Even then the items in the table remain static and do not reflect the input that I’m giving in the search box
The link to your site doesn’t work.
I’m sorry there was a spelling mistake in my first mail. The correct one is given above. Thanks!
You are not connecting the iTitle input field with correct name of the keyPress() function:
Either change the name in the Properties panel, or change the name of the function.
Good luck,
Yisrael
Thank you so much! It was such a silly mistake on my part. the _1 to the iTitle_keyPress function must have got added during my editing and reediting the code.
Thank you!
Hello, Yisrael.
Following this exchange I am trying to add 2 search elements in my page.
Not successful so far. Could you please take a look on my code:
import wixData from “wix-data”;
let lastFilterTitle;
let lastFilterTitle1;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value);
}, 200);
}
export function iTitle1_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle1’).value);
}, 200);
}
function filter(title, title1) {
if (lastFilterTitle !== title || lastFilterTitle1 !== title1 ) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains(‘alias’, title);
if (title1)
newFilter = newFilter.contains(‘text’, title1);
$w(‘#dataset1’).setFilter(newFilter);
lastFilterTitle = title;
lastFilterTitle1 = title1;
}
}
My site URL: https://sacf83.wixsite.com/mama/ecuador
Appreciate,
Hello Santiago,
Were you able to figure out adding 2 search elements to your page? I’m attempting to do the same thing.
Thanks,
Eric
Hi Yisrael and all,
This was a super helpful post I referenced when trying to create a search element for a database. I am running into trouble with my code when adding more than 2 search elements – I would appreciate any insights on where I went wrong when adding a 3rd drop down search: https://www.wix.com/code/home/forum/community-discussion/error-in-adding-third-search-element-to-search-a-database
Thanks in advance,
Diana
What have you tried? And what isn’t working?
@yisrael-wix How do we search two columnn of a database from one dataset at the same time?
My code only works for one column and I think it has to be here " function filter(platformName, platfromTheyIntegrate)"
----My code is below----
import wixData from “wix-data”;
$w.onReady(() => {
});
let lastFilterplatfromTheyIntegrate;
let lastFilterplatformName;
let debounceTimer;
export function input7_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#input7’).value);
}, 50);
}
function filter(platformName, platfromTheyIntegrate) {
{
if (lastFilterplatfromTheyIntegrate !== platfromTheyIntegrate || lastFilterplatformName !== platformName) {
let newFilter = wixData.filter();
if (platformName)
newFilter = newFilter.contains(‘platformName’, platformName);
if (platfromTheyIntegrate)
newFilter = newFilter.contains(‘platfromTheyIntegrate’, platfromTheyIntegrate);
$w(‘#PODPlatform’).setFilter(newFilter);
lastFilterplatformName = platformName;
lastFilterplatfromTheyIntegrate = platfromTheyIntegrate;
}
}
}
@freedfoxworldwide See Example: Search a Database to see how to create a filter for multiple fields.
It’s best to create a new post in the forum as more people will see the post.
Hi @yisrael-wix , could you please take a look at my code for me? I tried putting the search box at the header, then made it so the result would show in a separate page. It works, but only for the first input. Once the results are showing in the “Search Results” page, and I input another search, it won’t work anymore. Please help.
SITE CODE: (for the search bar at the header)
import { local } from ‘wix-storage’;
import wixLocation from ‘wix-location’;
import wixData from ‘wix-data’;
$w.onReady( function () {});
export function searchButton_click(event) {
let word = $w(“#searchBar”).value;
local.setItem(“searchWord”, word);
wixLocation.to(‘/search-results’);
}
PAGE CODE: (Search Results page)
import { local } from ‘wix-storage’;
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
$w.onReady( function () {
let booktitle = $w(“#BooksDataset”).getCurrentItem();
var sameWord = local.getItem(“searchWord”);
$w(“#input”).value = sameWord;
$w(‘#input’).placeholder = sameWord;
$w(‘#BooksDataset’).onReady( function () {
search();
});
});
export function searchButton_click() {
search();
}
function search() {
wixData.query(‘Stores/Products’).contains(‘name’, $w(“#input”).value)
.or(wixData.query(‘Stores/Products’).contains(‘description’, $w(“#input”).value))
.or(wixData.query(‘Stores/Products’).eq(‘sku’, $w(“#input”).value))
.find()
.then(res => {
$w(‘#results’).data = res.items;
})
}
Your problem is most likely because when trying another search on the results page, you are not running the code that’s in the page’s onReady() function since that only runs one time - when the page has loaded and is ready. Since you’re already on that page, that code won’t run again. You should change the logic around a little to ensure that all of the necessary code runs when it’s needed.
@yisrael-wix Oooh I see. However, I’m not a coder. lol i was basically just following videos and tutorials. So I dont really know how to change the logic around it? Could you maybe suggest something please?
@glmrdmlr The main problem that I see (upon inspection, not testing the code) is that you have code in the search page’s onReady(). That code only runs once - when the page is ready.
Since you’re not a coder, I would suggest visiting the following sites for information on programming in Javascript:
https://support.wix.com/en/wix-code/wix-code-basics
https://www.w3schools.com/js/default.asp
https://javascript.info
You can also play with the different examples available:
https://support.wix.com/en/article/wix-code-index-of-examples
https://www.wix.com/code/home/examples
https://www.grampsworkbench.com/examples
Good luck and have fun