[Solved] How to search from two or three datafields with a Search Box?

I’m trying to create a search box look for multiple types of information. So good example is how Kitchenbowl.com 's search doing it. It seems to be searching tags, keyword and food names.

If I was to create that in Bubble, those three items are separate data in a database, so how do I set the search box to look at more than one type of data field? Is this even possible?

2 Likes

Hey nordogg, if you’re using a repeating group and doing a search for, you can use the “Any Field” option when creating a constraint.

So, the constraint could be ‘Any field’ contains [Searchbox Input]'s value. But, there is a little bit of a limit on the tags. If someone were to enter something like ‘chocolate, cake’ the tags of the item would have to contain both of those tags, not just ‘chocolate’ or ‘cake’. :slight_smile:

7 Likes

Still having bit of a problem. I’m using “dynamic choices” for choice style, and Field of search is already set… So this is where I am having a hard time. Screengrab below:

Field of search is based on my data field… and currently set to “Name of Activity”

…but I want to search from “Name of Activity” and “age range”. Am I doing this wrong?

".

Ohhh I see. No, not wrong :slight_smile: from my understanding, if you are using the Autocomplete Dropdown element, you need to define one field to search (like you did with Name of Activity). For your purposes, I think it would be best to have something like this:

So on the left with a Dropdown element, a user would select an Age Range. You could have a field type ‘text’, with choices such as: 1 to 3, 4 to 6, 7 to 9. The choices could be static or dynamic if you prefer. I think static would be easier, and then within the app data of each Activity, make sure that each Activity’s Age Range field contains the exact wording of a choice that you defined in the static choices.

Then in the Search AutocompleteDropdown on the right, you could have these two constraints:

  1. “Any field contains autocomplete dropdown’s typed text”
  2. “Age Range = Age Dropdown’s value”

Does that achieve the UI that you need?

2 Likes

Considering people won’t necessarily know which activities are available on your website, you could also include a repeating group to search and display Activities. So, keep the Age dropdown and Autocomplete dropdown, and below it could be a repeating group like this:

The repeating group’s search for Activities would have the same constraints that the Autocomplete Dropdown has. :slight_smile:

2 Likes

Ah I see! But, I guess you can’t do two searches in one Search Box it looks like?

Using the AutocompleteDropdown you can’t, however - you could replicate the style of the AutoComplete Dropdown using an Input Element instead, with a Repeating Group below that searches for Activities. Then you could have this constraint:

The only difference would be that the results in the repeating group won’t bold the matching word in the search results the same way that the AutocompleteDropdown would.

5 Likes

Oh! it kind of worked!! but I am having a problem with a repeating group now… It’s forcing me to select specific data field for an activity…

You know what, I don’t think it’s a problem. I think this will work fine… although there is one problem with the drop down… when put your cursor on the search field it shows all of the result… this could be a problem when there are 100 items… know a way to limit this, instead of using “Fixed number of cells” I like how it appears based on number of results you have…

<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/bubble/original/2X/0/0a4a9351114a176460c0053590d5aca27a1b7058.png" width=“310” height=“395”

For the first screenshot, it’s forcing you to select a field because right now you have a text element and it wants to know which field of text to display. Since each Activity has a Name of Activity and an Age Range, you could create two text elements, one for Current Cell’s Name of Activity, and within that same cell next to it, have another text element for Current Cell’s Activity’s Age Range.

*If you only have Name of Activity, it will still display results when you enter an Age Range value that matches that Current Cell’s Activity. The text that will be displayed will be the Name of the Activity though. For example: a user enters the text “3”, and there is an Activity whose Name of Activity is “Coloring” and Age Range is “Ages 3 to 5”. That Activity will be displayed in the results, by displaying the text “Coloring”.

Then in the second screenshot, you could create a conditional statement on the repeating group which says: “When InputA is empty” --> “This element (the repeating group) is visible” (unchecked). That way, the repeating group won’t be visible before a User has entered anything into the Input. I am not 100% sure but I don’t think there is a way to adjust the number of rows based on the number of results using this method – fixed number of cells is probably the best bet.

2 Likes

Wow that worked!! You are awesome!

Ok, now that these elements are working… now I have problem with Search field… How do you display the result (drop down lists) you’ve clicked to show up on the search input screen? or do you have to go do search via workflow?

1 Like

Awesome!! No prob! :slight_smile: And I think it would be best to set up a workflow for the text element in the repeating group. So, when “Current Cell’s Activity Name of Activity Text Element” is clicked, Select Navigate -> Go to Page: Activity Page (for example), Data to Send: “Current Cell’s Activity”.

2 Likes

…and BOOM. It works. Thanks so much!

2 Likes

BOOM! My pleasure!! :slight_smile:

3 Likes

That’s Bubble exchanges as I like them :slight_smile:

10 Likes

@fayewatson, thanks for sharing!

One follow-on question – I’m trying to set-up a search for users that’s also filtered for whether they’re registered for a specific event. For performance reasons, I’m loading the list of registered users to a repeating group (1px by 1px) so I can reference that instead of pinging the database a bunch of times.

Is there a way to set-up a search for any field containing 's value? Note - I tried using :filtered but it doesn’t provide an option to search “any field containing.”

Thanks!

Hey Scott! I don’t think there is a way to use ‘any field containing’ if you’re using :filtered, but you could use an Advanced Constraint with many OR statements. For example, if you wanted to search fields within the User, the constraint could be:

“Advanced: This User’s First Name contains Input A’s value OR This User’s Last Name contains Input A’s value OR This User’s Company’s Company Name contains Input A’s value” etc. I’m not sure if that is the best option though, because I read a post where Emmanuel stated to only use filtered when you absolutely have to; it’s slower than using search constraints.

2 Likes

Thanks Faye! Very helpful! Will have to play around a bit to see what I can make work (functionally and performance wise).

1 Like

Hi!
Is there a way to have more than one field as de Caption for the searchbox result list?

For instance, I have list of products which may have 2 products with the same name, but with different types.
Ex.:
(name field) - (type field)
Product 1 - type A
Product1 - type B

When the search is performed it shows Product 1 twice like this
Product 1
Product 1 (1)

I’d like to have it like this:
Product 1 - type A
Product 1 - type B

Thanks!

Is “type” a field represented as a a list of possible types on the “product” thing?