Hi all,
I am new to this and am struggling with what is probably fairly simple code to setup a search for a Repeater that displays contents of a Dataset.
I’ve created the dataset and created a repeater that lists all the content/is connected. All I need now is a search box that searches the Name column of the dataset and displays the correct rows in the Repeater.
But - I’m struggling. I’ve read and watched many example but unfortunately can’t get my head around it.
Here is my code, can anyone please advise where I’m going wrong?
import wixData from ‘wix-data’ ;
export function searchbutton_click(event) {
wixData.query( “Grammar Schools” )
.contains( “title” , $w( “#searchbox” ).value)
.find()
.then(res => {
$w( “#repeater” ).rows = res.items;
});
}
To begin with try changing your repeater line to this.
$w('#repeater').data = res.items;
Thank you I’ll do this right now
Or you could simply do it like this straight from a button click.
import wixData from "wix-data";
$w.onReady(function () {
$w("#searchButton").onClick(()=>{
$w("#dataset1").setFilter(wixData.filter()
.contains("title", $w("#searchbox").value));
});
});
That did seem to solve that error. However, now when previewing I see two errors:
Error parsing web-module ‘public/pages/masterPage.js’: Unexpected token (10:0) while parsing file: public/pages/masterPage.js
WDE0025: The Grammar Schools collection does not exist. You cannot work with a collection using the Data API before it is created in the Editor.
The dataset set is called “Grammar Schools”, so I’m not realyl sure what’s happening here
@givemeawhisky I’m getting the error ‘setFilter’ does not exist on ‘#repeater’ on the example you listed
Your code should include the page onReady function as well.
Also check what your dataset is called in the Site Structure on the left hand side of your editor.
Is it Grammer School or is it GrammerSchool or is it Grammer_School etc.
import wixData from 'wix-data';
$w.onReady(function () {
});
export function searchbutton_click(event) {
wixData.query("GrammarSchools")
.contains("title", $w("#searchbox").value)
.find()
.then(res => {
$w("#repeater").data = res.items;
});
}
For this code your dataset name should be the dataset id name that you have on your page.
Either hover over the dataset icon element or check the name in the properties panel.
import wixData from "wix-data";
$w.onReady(function () {
$w("#searchButton").onClick(()=>{
$w("#dataset1").setFilter(wixData.filter()
.contains("title", $w("#searchbox").value));
});
});
@nathanjohnfuller
@GOS said to setFilter on the dataset not the repeater, could that be the problem?
Kristof.
@givemeawhisky Thank you so much, it works perfectly. If I could squeeze one more piece of advice out of you, it woudl be how to amend the code so the UX us to hit Enter, rather than or as well clicking the Search button (as it’s more intuitive).
But - if you don’t have time for that I’m hugely grateful for your help, it has been a life saver.
