Hi I am trying to follow the Corvid Tutorial: Adding Collection Data Search Functionality but I cannot get any results in preview mode my code is as follows:
import wixData from "wix-data";
export function searchButton_click(event) {
//// Runs a query on the "CareerResearch" collection
wixData.query("CareerResearch")
// Query the collection for any items whose "Name" field contains
// the value the user entered in the input element
.contains("fieldKey", $w("#searchbox").value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w("#resultsTable").rows = res.items;
});
}
$w.onReady(function () {
$w("#resultsTable").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
},
{
"id": "col2",
"dataPath": "Summary",
"label": "Summary",
"visible": true,
"type": "image",
},
];
});
Hopefully someone can help (first time implementing code). Thanks
O yes correct. Thank you for your help here
That is because that user input searches for the article title from the dataset on the page. If you type in 'wed' or 'get', then you would get the Mexico item in the repeater results.
The same with the continents dropdown - although note here that you are missing Central America from the live version of your live version of the dataset, so need to sync the sandbox version which does contain Central America to live version so that your live version has all the appropriate continents.
If you are wanting your page to do other things, then you will need to change your page code to suit your own page.
Finally I've made a breakthrough - it is working like the sample. It seems the issue was that I had added the event handler functions (in properties) but after only the code was added manually for these so they didn't link.
But just to finish - I mentioned before that the sample wasn't working perfectly and mine is now the same. So if I search for Mexico, for example, in the sample I get a blank. I note that the onChange event handler function on the iTitle is not linked (when you click on it in properties, it doesn't show on the code - the other handlers highlight in the code when you click them in the properties). Could this be causing the issue? Otherwise it seems ok for me but not working properly as per this??
I've just opened the tutorial link from Yisrael's post and it opens up fine.
When you say that you have copied the database and code across, have you simply made sure that all the elements on your website match that in the code, so you should not see any red dots next to the code line number or squiggly lines underneath the element name itself?
Also, have you made sure that through the properties panel for each element on your page, that you have on the '#iTitle' user input element both the onChange and onKeypress event handler functions are added to it, along with the '#iContinent' user input element has the onChange event handler function added to it.
Make sure that any dataset used on your website are the same name as on the page in your code and the dataset id name matches up where needed in your code and that all the permissions are set exactly the same as in the tutorial itself.
Also, make sure that your repeater and all of the elements inside each repeater container are also connected to a dataset field where needed too.
Finally, if you do publish your website to test this, then also make sure that you have synced your datasets from the sandbox to the live versions too, otherwise you will have nothing appearing on your live and published website.
Just to add, you can watch Wix Corvid YouTube video about it here.
Corvid by Wix | How to Set up a Database Collection
I copied this database and code across in place of the old link - Still cannot get any search or the filter working on the preview page. Everything looks the same but its as if the search / filter are not linking to the dataset. I believe I've fixed all the above mentioned items (lower case etc.). Is it anything to do with the site never being published?? I've tried everything and pulling my hair out at this stage. Note, this new link template doesn't work as well as the previous one
The link to the Example's template was corrupted. Use this Search Database Template URL.
Thanks again I tried everything but in the end copied the example from Yisrael directly across to check if that works. I get the following error code in preview mode:
"Wix code SDK Warning: The selectOption parameter at index 11 that is passed to the options function cannot be set to [object Object]. Options must contain either a non-null value or a non-null label." This error then leads me back to the following list of code
$w('#iContinent').options = options;
I have no idea what the issue as it was copied and pasted from the above example. Could you advise please
Field keys can be the same as your field names, however they are case sensitive, so if all lowercase they need to be all lowercase in your code too.
To find your field name and field key, simply open up your dataset and click on the little 3 dots icon on the right hand side of the field header and you will see the field properties which shows field name, field key and field type.
You can see more info on this in this Wix Support page for changing field type.
https://support.wix.com/en/article/changing-a-database-collection-field-type
Finally, if you are still struggling, then do what Yisrael has mentioned in his reply and look at the search example already provided by Wix and see how it is done there.
Thanks Guys - still struggling after reviewing all of the above - code is below. I have made sure all the IDs match with the search button , table etc. How do I check the Field Key - is it not just the same as the Field name by default (title)? Thanks Brendan
import wixData from "wix-data"; export function searchbutton_click(event) { //// Runs a query on the "CareerResearch" collection wixData.query("CareerResearch") // Query the collection for any items whose "Name" field contains // the value the user entered in the input element .contains("title", $w("#searchbox").value) .find() // Run the query .then(res => { // Set the table data to be the results of the query $w("#resultsTable").rows = res.items; }); } $w.onReady(function () { $w("#resultsTable").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 }, { "id": "col2", "dataPath": "Summary", "label": "Summary", "visible": true, "type": "image", }, ]; });
You can also play with the Search a Database example. Load it into your Editor, see how it works, and then adapt it to your own use.
First off please make sure that you format any code in your post to be in the code block by selecting all of your code and then choosing the code block icon in the toolbar.
As for your code itself, make sure that your dataset name is correct and is called CareerResearch, note that spelling along with upper and lower case is important and must match up.
Then check your code as where you need to add the field keys, all of this inputs should all be lowercase and not uppercase at the start.
As for your 'fieldKey' in the contains query, is this the actual field key of the field in your dataset that you are actually wanting the users to search?
You can see this page here to learn more about fields and field names and field keys etc.
https://support.wix.com/en/article/about-database-collections-fields