Having trouble implementing a search box function to a table database

Ask the community
,
1

Hello,

I watched this video to hopefully add a search box to a page with a large database (it has over 3500 rows) using a table. Here is the video I watched > https://www.youtube.com/watch?v=Hx7_8-lRsW0&feature=youtu.be . However, try as I might, I cannot get it to work.

I was wondering if someone can take a look at my code and the table structure to see what I am doing wrong. I am assuming there are more steps that are needed but I don’t have enough coding experience to figure it out. Ideally, what I would really like is a function that would “rapid scroll” through the list to find the row data that the user is searching for but I cannot find any documentation on how to do that. But I will be ok with it something like what is in the video provided above. Any help would be greatly appreciated.

1000×490 84.5 KB

import wixData from 'wix-data';
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
//TODO: write your page related code here...
});
export function Filter_click(event) {
$w("#prefixsuffixtrademark").setFilter(wixData.filter()
.contains("prefix", $w("#filterInput").value));
}
2

3500 records is far too many for users to have to scroll through, plus you can only have a limit of 1000, see here for more info.

How can I limit the number of items returned by a query?
By default, a query() is limited to returning 50 items. Add the limit() function to your query chain.
https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html#limit

You can workaround the limit as like in this forum post here for 3000 items.
https://www.wix.com/corvid/forum/community-discussion/dataset-query-for-3000-items

Also, if you look in the Corvid Examples, you can find a ‘Search a Database’ tutorial that you can open up in your own Wix Editor with all elements on the page laid out and all code already setup in the code tabs and datasets/backend functions etc setup as well.
https://www.wix.com/corvid/example/search-a-database
https://www.wix.com/corvid/example/checkbox-dropdown

You might even want to look at hiding the results table until the user has searched for something too.
https://support.wix.com/en/article/corvid-tutorial-adding-collection-data-search-functionality#optionally-collapse-the-table-on-load-1

You can also look at breaking down those records into sections and have the user search through different sections and only show the returned results that match instead of showing all the records.
https://www.vorbly.com/Vorbly-Code/WIX-CUSTOMIZED-SEARCH-BAR-USING-REPEATERS

3

WOW thanks so much for the answers! I am opening up the examples now. I am working with a table with 6 fields. Can this be accomplished with a table instead of repeaters? I can’t break it up. My clients are needing/wanting this data to be in one table.

4

This is the data they have on their old website. Any suggestions for other alternatives on how I can make it easier for folks to find their information? http://amha.org/registration/prefix-suffix-tradmark

5

I got it to work!!! Oh happy day! I figured out I had the $w(“#dataset1”).setFilter(wixData.filter()
function set wrong. It was pointing to “#prefixsuffixtrademarks” instead of #dataset1. Hallelujah!!! Thanks for your help GOS!

6

Great and well done for figuring it all out yourself. :+1: Believe it or not, that is a common issue as people are always getting it wrong for when to use the datasets id name or the actual name of the dataset.

It is the same with the datasets different modes and permissions, that always gets people too, even some of us sometimes when we forget to change it :wink:
https://support.wix.com/en/article/working-with-dataset-modes-and-collection-permissions

Plus, as for the presentation of the table, if the client/customer wants it like that in a table, then the customer is always right.

However, you could just look at making the table smaller with pagination on it so it only displays say 100 records on one page.

Check the different Wix Data Query options if you want to look into filtering it as you could use different types of queries here.
https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html

Although I would say again that it would be better if you could filter it somehow and then show the results so that people don’t have to scroll down through all those names to have to find their own name in the list.

Especially as you say you are working with the six fields, that is a lot of info going on the one page, viewing that table list on mobile devices would not be fun!

For me I would look at adding conditional dropdown or radio button filters that filter the list as the site user chooses them so that the list decreases in size.
https://support.wix.com/en/article/filtering-content-based-on-user-selection
How to Filter Items on Repeater Using a Dropdown and Boolean Values on Wix Code

Otherwise, you can do as suggested in previous reply and have a search input for the persons surname for example, then only show the table with the search results so that it is only showing their own names etc.

Finally, just remember that if you did look into doing some sort of filter, then make sure that you have a reset or clear button for example so that it goes back to the default settings.

7

@givemeawhisky thanks! I’ve been doing the happy dance! LOL The only other question I have (and I have been trying to figure it out for myself but another wall has smacked me in the face), is how can I return 2 search fields (“prefix” & “owner”) in the 1 search box? Here is what I have:

import wixData from 'wix-data';
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
//TODO: write your page related code here...
});
export function filterInput_keyPress(event) {
$w("#dataset1").setFilter(wixData.filter()
.contains("prefix","owner", $w("#filterInput").value));
}

This ^ is not working with the added “owner” included in the .contains line. But it works great with only the “prefix”. Any thoughts?

8

@mnorwood16
Look at using the or function.
https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html#or

Create a query, add an or, and run it

import wixData from 'wix-data';

// ...

wixData.query("myCollection")
  .lt("age", 25)
  .or(
    wixData.query("myCollection")
      .gt("age", 65)
      // rest of code... //
9

Also, just to confuse you a bit more as you are using keypress, you might want to add in a little time delay on that user input so that it can capture all of the users added input.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/give-the-textinput-onkeypress-function-some-time

10

@givemeawhisky that was going to be my next endeavor :slight_smile:
on the query: do I just add that code and change the necessary “”'s under the code I have now? My mind is once again… blown

11

@mnorwood16
Just set this…

$w("#dataset1").setFilter(wixData.filter()
.contains("prefix","owner", $w("#filterInput").value));

to be the same as this…

  .lt("age", 25)
  .or(
      .gt("age", 65)

so you would have the two contains functions for the setFilter with the or between them

12

Something like this…

import wixData from 'wix-data';

$w.onReady(function () {
});

export function filterInput_keyPress(event) {
$w("#dataset1").setFilter(wixData.filter()
.contains("prefix", $w("#filterInput").value)
.or
.contains("owner", $w("#filterInput").value))
}
13

Ah ha…got it. I wasn’t putting the .or in there. But it is still not working. I am getting a “parsing error: unexpected token” on the first “.contains”. On another note…I managed to get the delay to work!

import wixData from 'wix-data';
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
//TODO: write your page related code here...
});
export function filterInput_keyPress(event) {
$w("#dataset1").setFilter(wixData.filter()
.contains("prefix", $w("#filterInput").value);
.or
.contains("owner"), $w("#filterInput").value));
}
setTimeout(() => {
let val = $w('#filterInput').value;
console.log(val);
}, 10); // 10 milliseconds works for me
14

GOS I got it to work :slight_smile: I guess I need to quit asking so much for help and try more to figure it out on my own. I have found I learn more that way. But YOU, as well as others who provide videos have been A HUGE HELP!!! And I appreciate it immensely. Thanks so much!