Coding a search bar for a repeater connected to a dataset

Ask the community
,
1

Hi guys!

I am creating a webpage where the users should be able to search and find papers. Before reading this you should keep in mind that I do not have any background with coding.

So, my problems are mostly related to the coding of the search bar. I have created a database which looks like this (this picture shows just a test):

1441×708 136 KB

Furthermore, I have created a dynamic page with a repeater that looks like this:

1251×500 28.7 KB

1050×600 25.8 KB

The future users of this webpage would most likely like to search for papers by entering keywords to the search bar. Until now I have only managed to make a code that lets them type in one keyword, e.g. “gas”. As soon as you type e.g. “gas” and “future”, the repeater turns out empty. The search bar is also limited to searching for a word in the title, meaning that they can’t search for both the author’s name and the title.

The code looks like this:


My questions are:

  1. What do I need to add to the code in order to enable searching for more than just one word in the title? I want my users to be able to type in e.g. “gas future” and then be shown the article named “The future of gas”.

  2. If it is not too tricky, what can I add to the code to let my users search for both the author and the title of the paper?

Hope these questions make sense! I am happy for all answers.

Best regards,
Ragnhild

2

Hello Ragnhid

You can achieve that by adding multiple filters based on the value (split the string to words and add filter for each word), here’s how it would look like:

import wixData from 'wix-data';

function filter(searchValue) {
 let searchKeys = searchValue.split(" ");
 let finalFilter = wixData.filter().contains("title", searchValue)
 searchKeys.forEach(async(key) => {
        finalFilter = finalFilter.or(wixData.filter().contains("title", key))
    })
    $w('#dataset1').setFilter(finalFilter)
}

Best
Massa

3

Hi Massa!

Thank your for your reply.

Do I remove some of the old code and replace it with this one? Or is your code an addition?

Best
Ragnhild

4

Hello

This code is to be implemented for the filter function only

Best!
Massa