Data Search Functionality Not Working

Ask the community
,
1

Hello,

I have been trying to apply a data search functionality to a dataset. I believe that I have followed the tutorial page on this topic exactly as described, however, the preview is not yielding any results. Here is the code that I have applied. Can anyone spot any possible mistakes?

(Yes, I have checked the field names multiple times and they all match exactly)

import wixData from "wix-data";
export function searchbutton_click(event) {
//// Runs a query on the "CareerResearch" collection
wixData.query("cricketClubs")
// Query the collection for any items whose "Name" field contains/ the value the user entered in the input element
.contains("title", $w("#CricketSearchBar").value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w("#CricketResultsTable").rows = res.items;
});
}
$w.onReady(function () {
$w("#CricketResultsTable").columns = [{
"id": "col1", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "title",
"label": "Title", // The column header
"width": 100, // Column width
"type": "string", // Data type for the column
},
];
});
2

You are not using the DATASET-Way !!!
You are doing it the —> wix-DATA-way, by using a query!

There is absolutely no coding line in your code, which is connected to a DATASET.

But anyway, it should also work the way you do (without any DATASET).
Normaly your CODE looks good, perhaps with a little mistake…

Try this version of your code and do also take a look into CONSOLE!

And do not forget to —> SYNC your LIVE & PREVIEW-DATABASE!


import wixData from "wix-data";

const DATABASE = "cricketClubs"
const DATAFIELD = "title"
const VALUE = $w("#CricketSearchBar").value

$w.onReady(function() {console.log("Page is ready!") 
 setupTable();

 $w('#searchbutton').onClick(()=>{console.log("Searchbutton-Clicked")
   wixData.query(DATABASE)
   .contains(DATAFIELD, VALUE)
   .find() 
   .then((res)=> {console.log("Filter-Results: ", res)
     $w("#CricketResultsTable").rows = res.items;
   })
   .catch((err)=>{console.log(err)});
});


function setupTable(){console.log("Table-Setup running...")
 $w("#CricketResultsTable").columns = [
  {
   "id": "col1",
   "dataPath": "title",
   "label": "Title", 
   "width": 100, 
   "type": "string",
  },
 ];
}
3

Thank-you Velo-Ninja - any assistance is much appreciated. I will review the dataset connections and update the code as per your recommendation.

I’ll report back regarding my progress.

4

So, I have implemented your code suggestion, however, it seems to be displaying an error message.

The final line is underlined and says ‘Parsing error: Unexpected Token.’ My understanding is that this error is caused by too many or not enough parentheses or brackets, but, the code appears to be sound.

Do you have any recommendations to counter this issue?

Thank-you!

5

@buxtonfm5
Yes, you are right —> forgot a closing —> }); in → onReady-Section…

$w.onReady(function() {console.log("Page is ready!") 
   setupTable();

   $w('#searchbutton').onClick(()=>{console.log("Searchbutton-Clicked")
     wixData.query(DATABASE)
     .contains(DATAFIELD, VALUE)
     .find() 
     .then((res)=> {console.log("Filter-Results: ", res)
       $w("#CricketResultsTable").rows = res.items;
     })
     .catch((err)=>{console.log(err)});
   });
});
6

@russian-dima
Thank-you very much - the search function is working!!!