Trouble with code for user filtering of multiple columns in table connected to database

Ask the community
,
1

Hello forum, Can anyone give me some guidance on how I can rectify my code error? I have a database connected to a table via dataset. I added a user input box and a button labeled Filter to allow users to search the table by description and created an onclick event for the button. This seems to work fine. But I want the user to be able to search more than just that one column. Here is the code I tried.
import wixData from ‘wix-data’;
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
$w.onReady( function () {
//TODO: write your page related code here…
});
export function Filter(event) {$w(“#dataset1”).setFilter(wixData.filter()
.contains(“productDescription” , $w(“#filterInput”).value))
.contains(“title” , $w(“#filterInput”).value);
//Add your code for this event here:
}

I get no red dot by the code however users still cannot search the “title” column only the “product description” search works. I would also like to add the ability for the user to hit the enter key in addition to clicking on the Filter button. New to code and looking for some guidance. Thanks.
Jim

2

You would be better off here having seperate inputs for each value instead of using the same input.

Then you can simply use or in your code.
https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html#or

As for using the enter key instead of using a onClick event on a button, you can do that by using onKeypress on the user input itself.
https://www.wix.com/corvid/reference/$w.TextInputMixin.html#onKeyPress

export function yourUserInput_keyPress(event) {
  if (event.key === "Enter") {
  wixData.query('YourDatasetName')
    .contains('fieldkey', $w('#yourUserInput').value)
    .find()
    .then(res => {
      $w('#resultsTable').rows = res.items;
    });
}

Change #resultsTable if your table has a different id name.

Also, if you are wanting to use onKeyPress, it is worth having a read of this page too and using a small delay with setTimeout.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/give-the-textinput-onkeypress-function-some-time

3

Thanks GOS. I used the or function and was able to filter the additional column (title) but in doing so I lost the ability to filer the original (product description). To also clarify, I am looking for a way to also allow the user to use the enter key in adidtion to the Filter button. Would you mind telling me how I mucked this code up and lost the filtration on (product description)?
import wixData from ‘wix-data’;
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
$w.onReady( function () {
//TODO: write your page related code here…
});
export function Filter(event) {
$w(“#dataset1”).setFilter(wixData.filter()
.contains(“productDescription”, $w(“#filterInput”).value))
.or(
$w(“#dataset1”).setFilter(wixData.filter()
.contains(“title”, $w(“#filterInput”).value))
)
//Add your code for this event here:
}