I'm using a repeater connected to my database. I have a search bar and am using code from the video on "how to create a search for your database". The problem I have is i want to be able to search for two elements from my database not just one. It can be one or the other not both together. For example, search 'title', or search a 'category'. Here's my code which only allows me to search for 'title' but not 'category'. Thanks.
import wixData from "wix-data";
export function searchBar_keyPress(event, $w) {
console.log($w('#searchBar').value);
filter($w('#searchBar').value);
}
function filter() {
$w('#dataset1').setFilter(wixData.filter()
.contains("title", $w("#searchBar").value));
}
Dragos:
I'll post another suggestion tomorrow if you are still stuck.
The error you are having is because the onReady function is incorrect. This
$w.onReady(function () { $w("#repeater1").onItemReady( ($item, itemData, index) => { $item("#text48").text = itemData.textField; } );
Should look like this
$w.onReady(function () { $w("#repeater1").onItemReady( ($item, itemData, index) => { $item("#text48").text = itemData.textField; } ); });
You may also have an extra } at the end of the page code.
stcroppe,
Thanks for your suggestion I appreciate it. I'm having a difficult time implementing your dataset.setFilter() statement suggestion into the code. Any chance you can reference the link to the solution that you mentioned. Currently I do have a dataset connected to the repeater, but I assumed that Ethan's code is filtering straight from wix-data database and not the dataset, and regurgitating the results into the repeater which is the goal.
Ethan, doesn't filter anything and is throwing an error on line 21, export function searchBox_keyPress(event, $w) {
-----------------------------------------------------------
import wixData from 'wix-data'; let lastFiltersearch let debounceTimer $w.onReady(function () { $w("#repeater1").onItemReady( ($item, itemData, index) => { $item("#text48").text = itemData.textField; } ); function update() { if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = undefined; } debounceTimer = setTimeout(() => { filter($w('#searchBar').value); }, 200) } export function searchBox_keyPress(event, $w) { update() } function filter(search) { let totalResults = 5 // displays total of 5 rather then 50 default if (lastFiltersearch !== search) { wixData.query('CATegory') .contains('search', search) .or( wixData.query('CATegory') .contains('caTegory', search) ) .or( wixData.query('CATegory') .contains('mOrF', search) ) .or( wixData.query('CATegory') .contains('county', search) ) .limit(totalResults) .find() .then((results) => { // the results are in filterData.items // $w('repeater1').data = results.items; }) .catch((err) => { console.log(err); }) } }
Dragos:
I helped another user out with a similar problem to this. One of the problems they had (and I think you might to) is they were using wix data AND wix dataset to try to managed their repeater Items in the search. This will lead to a bad result (as you are experiencing). What you probably need to do is use the search code that you have used from Ethan in a dataset.setFilter() statement. Then what you will see is that the repeater will only display the search results AND you should be able to page through the results correctly. If you don't have a dataset attached to the repeater then you will need to manage the result set and paging by changing the repeater .data array with a page length of results that you pull from the wix data result set.
Hope this helps
Oh my bad.Thats becuase the repeater doesn't know what to do with that data. It has it all but doesnt know how to display it.
Add this into the $w.onReady where it says
page code goes here
$w("#repeater1").onItemReady( ($item, itemData, index) => {
$item("#myRepeatedText").text = itemData.textField;
} );
Replace myRepeatedText with element in the repeater
ItemData is results.items[indexId]' so to get data from the dataset its itemData.the-id-of-field-in-dataset
To link more items in the repeater use $item("# not $w("#
The limit to repeaters currently is lag and only will display 50 items at a time without some code to add pages or append more data
Hope you didn't mind, the reason I liked the code for your site you referenced is because it looked like you had a functioning next page feature for it. I've used the generic code before and couldn't tie in a working prev page and next page, meaning if I set limit to 5 and have 15 results, when I hit next page button it was no longer part of the 15 query results but just random results. I've read the reference stuff before but seems very generic and poor in practicality for specific examples.
The code you fixed for me didn't work, no errors but didn't filter anything. I suspected it was missing a #repeater1 results.items function so I added it along with a limit function but it's still not filtering. You've been a tremendous help I appreciate it.
-------------------
import wixData from 'wix-data'; let lastFiltersearch let debounceTimer $w.onReady(function () { //TODO: write your page related code here... }); function update() { if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = undefined; } debounceTimer = setTimeout(() => { filter($w('#searchBar').value); }, 200) } export function searchBox_keyPress(event, $w) { update() } function filter(search) { let totalResults = 5 // displays total of 5 rather then 50 default if (lastFiltersearch !== search) { wixData.query('CATegory') .contains('search', search) .or( wixData.query('CATegory') .contains('caTegory', search) ) .or( wixData.query('CATegory') .contains('mOrF', search) ) .or( wixData.query('CATegory') .contains('county', search) ) .limit(totalResults) .find() .then((results) => { //the results are in filterData.items $w('repeater1').data = results.items; }) .catch((err) => { console.log(err); }) } }
you were using the code i wrote for my site.
This should work for you. also here is a reference page for syntax and the data in results
https://www.wix.com/code/reference/wix-data.WixDataQueryResult.html
import wixData from 'wix-data'; let lastFiltersearch let debounceTimer $w.onReady(function () { //TODO: write your page related code here... }); function update() { if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = undefined; } debounceTimer = setTimeout(() => { filter($w('#searchBar').value); }, 200) } export function searchBox_keyPress(event, $w) { update() } function filter(search) { if (lastFiltersearch !== search) { wixData.query('CATegory') .contains('search', search) .or( wixData.query('CATegory') .contains('caTegory', search) ) .or( wixData.query('CATegory') .contains('mOrF', search) ) .or( wixData.query('CATegory') .contains('county', search) ) .find() .then((results) => { //the results are in filterData.items }) .catch((err) => { console.log(err); }) } }
I added the ) after the } for line 12 but giving me an error for that line now saying, unexpected token )
…it got rid of all the other errors though
import wixData from 'wix-data'; let debounceTimer function update() { if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = undefined; } debounceTimer = setTimeout(() => { filter($w('#searchBar').value); }, 200); }) export function searchBox_keyPress(title, $w) { function filter(title) { let totalResults = 5 // Number of results per page, default is 50 if (String($w('#PerPage').value)) { totalResults = Number($w('#PerPage').value ) } // requests per page dropdown if (lastFilterTitle !== title) { wixData.query('CATegory') .contains('title',title) .or( wixData.query('CATegory') .contains('caTegory',title) ) .or( wixData.query('CATegory') .contains('mOrF',title) ) .or( wixData.query('CATegory') .contains('county',title) ).limit(totalResults) .find() .then((filterData) => { $w('repeater1').data = filterData.items updatecount() totalPages = Math.ceil(filterData.totalCount / totalResults) oldResults = filterData $w('#Page').text = "1 / " + totalPages $w('#Page2').text = "1 / " + totalPages }) .catch((err) => { console.log(err); }); getSheets(title,totalResults).then( (filterData) => { }) } }}
paste the actual code instead of a picture?
added that and caused even more errors
You are missing a closing bracket i think for searchbox_keypress
tried that earlier and caused a different error point at the end, also did not do any filtering at all
Remove export
I'm pretty sure I am missing something, tried different variations but no success. Any advice?
that's excellent, you saved me countless hours with this solution. I hope these solutions you provided will help others with similar situations.
i do it on my site with 5 fields linked to 1 input you can keep expanding it as much as you need
also the onKeyPress lag can be reduced with a timer
let debounceTimer function update() { if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = undefined; } debounceTimer = setTimeout(() => { filter($w('#searchBox').value); }, 200); } export function searchBox_keyPress(event, $w) { update(); } function filter(title) { //data search code with title holding the value of the searchbox }
the 200 can be increased to any number. It causes the search to only happen X milliseconds after the user has stopped typing
your awesome. it worked perfectly. and the search button removed the lag that onkeypress creates. I can't thank you enough.
Suppose down the line I wanted one search input to handle multiple fields in the database would that even be possible or i'd always need either a drop down or an additional key input like you showed me just now?
that's fine i can do that, but how do i tie in a on click event and have an actual search button so its not an on keypress since that probably wont work with two search bars?