Section 5 (Lesson 5/8): You’ll learn how to build a multiple-element search component in this lesson. We’ll populate the URL with search terms and then use those text parameters in our repeating group.

You’ll get comfortable with:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

​

It's time to bring this bad boy to life! Let's jump in, attach the Input Search, the two dropdowns, and set up the workflow for the Search button, and then we'll also set up the constraints to make sure that those are all hooked up and working as a set.

We've got our Search button. Let's double click the button and bring up the Property Editor and then click "Add workflow." Step 1, and it's the only step, we're going to select "Go to page' because we want to add some URL parameters (we've covered this in a previous section). Going to the same page, of course, because we just want to access this area down here: "Send more parameters to the page" and check that box. The text parameter will be "query" (could also be "search," it doesn't matter) and let's just associate it with "Input Search's value." Next key is "term" and now we're looking for the "Dropdown Term's value's Display". Final one is "location" which equals "Dropdown Location's value's Display." Okay, so that's the first thing we need to do.

Now, we have to instruct our Repeating Group to return the results based on this search. So I've clicked on the Group Card for the Current cell's Job, I'm going to right-click and choose "Select first parent" to get to the repeating group. You can also get there multiple other ways, of which you know by now.

Let's click the "Search for Jobs" data source in RepeatingGroup Jobs, and let's add in our parameters. So for this search constraint, this job needs to be live (Live = "yes").

Then we're going to click to add a new constraint and now I'm going to choose "Any field" and then Bubble says "Any field contains." So because I want to be able to search in both the Title and the Description, Bubble will allow me to do that with this "Any field contains." You can search across multiple inputs where there is relevant text inside. Now, where is this? Well, it is in the Input search, but don't forget we're using parameters for this particular user interaction. So it is the parameter called "query," we set that up previously. So you can type the word "get" inside the dynamic data to click "Get data from page URL," the parameter name is "query," case sensitive, and the type is text. That constraint should read "Any field contains Get query from page URL."

Next, we have the Term. Term is equal to Get data from page URL, where the parameter name is "term." This would work if we just leave the type as text because the output of an option set option does default to text by default. But, you could also choose "Term" here if you want.

Now, we need the Location, and something we actually forgot to do earlier was, we copied and pasted this Dropdown Term so I'm just going to change this placeholder so it says "Select term." Then for this Dropdown Location on the right-hand side, I want you to change the dynamic choices because it'll be currently set to Term, change it to Location. And then instead of All Term for choices source, change it to All Location, and then the rest should default to what it should. Now I'm going to type "Select location" in the Dropdown Location placeholder.

Okay, but back on the repeating group, I'm using my Elements Tree to get back there, now I can choose Location equals Get data from page URL, the parameter name is
"location," and like I said previously, with an option set, it defaults to text and I can choose to leave it as text or I can just choose Location as well. Bubble knows what we're trying to do here.

Okay, so we have these four: Live, Any field contains, Term, Location. We will continue to sort by created dates, but let's also check the box to ignore empty constraints. Otherwise, it's not going to return results if a constraint is empty, meaning that if I just want to search a query term, but I don't want to use the dropdowns, then I can, but only if ignore empty constraints is checked. Ignore empty constraints.

Okay, let's try this! I've also removed the debugger bar. I can see a small design issue here, we can go fix that soon. But for now, let's try search something like "Brand." Click on "Search," and I can see "query=Brand," and here is the result. If I then set Term to Full time and click on Search again, we get no results. We also need a way to clear these options with a button. If we go back to Term equaling "Part time," yes, I can see more results.

Okay, let's continue on the UI design. So I'm going to add another button here to the right-hand side. I'm going to say command+C, command+V to drop a button to the right-hand side. This button will say "Reset." I'm going to change this style to a Secondary Button, and on the workflow, which I'm going to add now, I'm simply going to say, Navigation --> Go to page. We'll go back to the same page (search). I'm going to leave everything else unchecked, just so it defaults to its original state, which has no parameters.

Okay, not done yet. Back on the Design tab, I don't want this Reset button showing if we haven't filtered our search, that's just poor user experience. So on the Layout tab, I'm going to uncheck fixed width and I'm going to say collapse when hidden.

Then on the Conditional tab, I'm basically going to say that if the Input Search, or the dropdowns, if any of them have data, that's when I want to show it, the button. So I'm going to say, When "Input Search's value is not empty or Dropdown Term's value is not empty or Dropdown Location's value is not empty," if any of those things equals true, so there is a value in one of those, then this element is visible.

I'm just going to group these in a new group, right-click, "Group elements in" --> a "Row container." Let's call this "Group Buttons". On the Layout tab, we're going to add some gap spacing just of 8 px here and 8 px on top as well. And now we can just remove the min height. I'm going to also check "Fit width to content" on Group Buttons.

Okay, so we can search, we'll keep the search button live so that a person can search and then select a term, search again, and then select location, etc. But as soon as there is a value in either of these three, then the reset button will appear, and that's when we'll actually reset everything. But what I also want to do is make sure that on "Button Reset is clicked" workflow, we're also resetting data of Group Inputs using the "Reset a group/popup" action for Group Inputs as step 1, and putting the Go to page search action in step 2. This way, anything inside that group - any input or dropdown - will be reset.

Let's have another go! Just going to clean up the URL. We're going to type "Developer" in the search bar and then search. And you can already see that there's a reset button is showing, so we could reset at that stage, which is great. So Developer, Part time, San Francisco. That will return the Bubble result. Oh, and another one I see. Senior developer, Part time, San Francisco. Two results. We also need to sort this part out. Okay, and then we go ahead and reset, and everything is reset as it should. Let's just fix a few problems here before the break.

So first of all, I'm going to push down Group Section on the Layout tab, I'm going to choose 82 pixels of top margin to get that a bit down. I'm also going to make sure that this Navbar is in front, so I'm going to right-click on the Navbar and click "Bring to front." Okay, that solves that.

Then let's hook up dynamic data here in the Text 12 results, this just needs to point to the RepeatingGroup Jobs. So highlight the "12" in the Appearance tab and then insert dynamic data. Type "RepeatingGroup Job's List of Jobs:count." Okay, and to clean up the editor view, I'm just going to type in 12 results in the canvas placeholder.

Now, I realized that we added a button here for "Apply" but I'd rather want to add a link. So I'm going to go find myself a Link element, drop that inside Group Sponsored. I'm going to change the style quickly just to a Secondary Button Link. And now I can type "Apply," in the Appearance tab, meaning that we can actually use this to take a user to a job page, which we'll start designing in the next lesson.

On the Layout tab, I want it edge to edge by removing the fixed width, removing the min width, and setting the height to 44 px. Now we can delete the Button Apply beneath it. Excellent. One last look.

Refresh the page, remove the debugger bar. Still have this issue, even though... I'll fix this up on the break, but I'm really happy with the rest of this. The functionality to be able to bookmark will come a little bit later in the next section when we sign up candidates.

We can see that the data is working: Posted March 25th, and down here, Posted March 18th. And in fact, realistically, we would have a different field to track when a job is posted, because you might create a job that might go through various forms of validation from within your company, people wanting to check that it's correct. And then it might be posted or scheduled to be posted at a later date, and by the way, that is functionality that we can employ in Bubble: the ability to schedule something, data to change, at a later date. But for now, I'm pretty happy with this. "Select term, Select location," looking really, really good.

Okay, so I guess you could call that, say, part one of this section. When we get back, we're going to start designing the job display page, where someone is taken to when a job is clicked on to look at more information about the job and to be able to apply for a job. I'll see you in the next lesson.