How do I create search for multiple fields in dataset?

Discussion Ask a question
,
1

Hi there,
Just wondering if anyone could help me finish a page intended to search a dataset for my business’s retailers and their details.
The page contains an input, search button, repeater and a dataset, and uses this code:

import wixData from “wix-data”;

export function button1_click(event) {
wixData.query(“Retailers”)
.contains(“postcode”, $w(“#input1”).value)
.find()
.then(res => {
$w(“#repeater1”).data = res.items;
});
}

It works well displaying a retailers details in the repeater when their postcode is entered into the input and the button is clicked, but I would like for the search to work with the other fields such as "town’ and “state”.

Also the page is probably not fully functional unless there is a way that I can make it show retailers in the surrounding postcodes of whatever is searched, so any ideas in making that happen are appreciated.

And ideally but not necessary it would be good if the search button could be clicked using the enter key, and incomplete searches still displayed results.

If anyone is able to give me a hand doing these things it would be greatly appreciated.
Thankyou :slight_smile:

2

Hi, Forest IT .

  1. I would first recommend renaming " input1 " to something more mnemonic like " inputPostCode ":
wixData.query("Retailers")
  .contains("postcode", $w("#inputPostCode").value)
  .find()
  .then(res => {
    $w("#repeater1").data = res.items;
  });
  1. Does then replacing the above with the following:
wixData.query("Retailers")
  .contains("postcode", $w("#inputPostCode").value)
  .and(
    wixData.query("Retailers")
      .contains("town", $w("#inputTown").value)
  )
  .and(
    wixData.query("Retailers")
      .contains("state", $w("#inputState").value)
  )
  .find()
  .then(res => {
    $w("#repeater1").data = res.items;
  });

take care of “town” and “state” for you? (Alternatively, you might have to replace both occurrences of “.and(” above with “.or(”.)

2 Likes
3

Hi @abergquist ,
Thank you for your quick reply.
I probably didn’t word correctly that I want to be able to search multiple fields using the same input. If I am unable to do so I may have to use your suggestion.

4

Hi,

In that case …

  1. I would first recommend renaming " input1 " to something more mnemonic and more generic like " inputPostCodeTownOrState ":

  2. Would the following then work for you:

wixData.query("Retailers")
  .contains("postcode", $w("#inputPostCodeTownOrState").value)
  .or(
    wixData.query("Retailers")
      .contains("town", $w("#inputPostCodeTownOrState").value)
  )
  .or(
    wixData.query("Retailers")
      .contains("state", $w("#inputPostCodeTownOrState").value)
  )
  .find()
  .then(res => {
    $w("#repeater1"#repeater1").data = res.items;
  });

?

5

When I clicked on [Publish] above, it included an extra (2nd) occurrence of " #inputPostCodeTownOrState " within the double quotes (make sure you have only one/1 occurrence …).

6

Thank you. For whatever reason it works with “postcode” and “state” but “town” produces no results. I thought it to be an error in the field name or that my input didn’t match any results, but I was thorough in making sure that wasn’t the case and still couldn’t make it work.

7

Sorry, I was using the field name rather than the field key. Thank you for all your help it is much appreciated.

8

You’re welcome; you can now go to town with your code!

9

I’m trying to do something similar with just a dropdown trying to search across three fields in the database. Here is the code I am using but it’s not pulling from the other fields:

import wixData from “wix-data” ;

// For full API documentation, including code examples, visit Velo API Reference - Wix.com
export function dropdown1(event) {

//TODO: write your page related code here…

wixData.query( ‘#dataset1’ )
.contains( ‘therapy’ , $w( ‘#dropdown1’ ).value)
.or.contains( ‘therapyType2’ , $w( ‘#dropdown1’ ).value)
.or.contains( ‘therapyType3’ , $w( ‘#dropdown1’ ).value)
.find()
.then(res => {
$w( ‘#repeater1’ )
});
}

10

That is not the correct syntax for or Query.

Look at Wix’s example on their Reference guide:

11

Thanks, this is my first attempt at coding.

1 Like
12 

function here_FUNKCTION_NAME() {  
wixData.query("Nam_of_YOUR_wished_DATABASE")
  .contains("therapy", $w('#dropdown1').value)
  .or(wixData.query("Nam_of_YOUR_wished_DATABASE")
      .contains("therapyType2", $w('#dropdown1').value)
  )
  .or(wixData.query("Nam_of_YOUR_wished_DATABASE")
      .contains("therapyType3", $w('#dropdown1').value)
  )
  .find()
  .then(res => {
    let items = res.items
   console.log(res)
   console.log (items)
  }); 
}

And you will still need a TRIGGER which will call/start this function (for example a press on a button, or a change-event in a dropdown, or what ever.

exportfunction dropdown1(event) {here_FUNKCTION_NAME()}

And of course you need to import the relevant API… (to the VERY TOP of the CODE)

import wixData from"wix-data";

I did not test it, but should work theoreticaly.
You will find the results in CONSOLE in the PREVIEW-MODE or when pressing F-12 in your google-chrome-browser and switching to CONSOLE-section.

EDIT: And by the way, this solution does not use any dataset.

13

This is already a lot more than a lot of people attempt so keep going :wink:

Use the Wix Reference guide when in doubt.
Take a look at Wix’s examples. I learned by ‘reverse coding’ them. Pulling them apart and redoing them to understand how and why things work a certain way.

You are on the right track so keep going.

14

Thank you. It is so hard when you’re not sure what part relates to what. This is what I’ve changed it to so far (but still not working):

import wixData from “wix-data” ;

// For full API documentation, including code examples, visit Velo API Reference - Wix.com
export function dropdown1(event) {

//TODO: write your page related code here…

wixData.query( “therapies” )
.contains( ‘therapy’ , $w( ‘#dropdown1’ ).value)
.or(
wixData.query( “therapies” )
.contains( ‘therapyType2’ , $w( ‘#dropdown1’ ).value)
)
.or(
wixData.query( “therapies” )
.contains( ‘therapyType3’ , $w( ‘#dropdown1’ ).value)
)
.find()
.then(res => {
$w( ‘#repeater1’ )
});
}

15

Hello one more time.

You probably just forgot something :grin:

.find()
  .then(res => {
    $w("#repeater1"#repeater1").data = res.items;
  });
  1. You did a query of your DATABASE ? —> YES
  2. You did filter some data ? —> YES
  3. You did let showing you the results ? Not really!

And here we have an error…

 .then(res => {      $w('#repeater1')    });
16

I’ve changed that to $w( “#repeater1” #repeater1 ").data = res.items;
but it is giving an error of $w should only get one argument

17

Ok, we have some ERRORs here. You are not doing exactly what a suggest you.

Try this one…

import wixData from"wix-data";

$w.onReady(function(){   }

export function dropdown1_change(event) {xxx()}

function xxx() {
    wixData.query("therapies")    
    .contains('therapy', $w('#dropdown1').value)    
    .or(wixData.query("therapies")
    .contains('therapyType2', $w('#dropdown1').value))    
    .or(wixData.query("therapies")
    .contains('therapyType3', $w('#dropdown1').value))
    .find()
    .then( (results) => {
        console.log(results)
        $w('#repeater1').data = results.items;
    });
}
18

Thank you, I’m sorry, I’ll get better. What does the xxx parts mean?

19

XXX = name of the function. You can name it like you want.
YYY / ZZZ / myFunction / doMyFilter / start_FilteringProcess / myFunctionWithoutName as you want :rofl::rofl::rofl:

But if you change it, do not forget to change on both parts …

  1. BUTTON-PART
export function dropdown1_change(event) {ZZZ()}
  1. CODE-PART
function ZZZ() {
20

I got it. The xxx is the event that needs to be the same in each area. So it can be any name, just as long as they are the same!