How to clear default value on searchBox

[anna6]

Hey,

I’m developing an app with an ‘airbnb style’ filtering which uses: a geographic searchBox, two different dropdowns and air date picker.

The user is inputting the search query data on the home page and I’m pushing the data via the url to the results page. I want all the inputs to display the queried data as the default value as the page loads. Then i want the user to have the ability to clear each input and search again.

I hope that makes sense, please let me know If I can elaborate further. Just to note, I’ve tried resetting the data on the searchBox group.

https://bookings4kidst.bubbleapps.io/version-test/

[anna6]

bump!

[Diego]

Place the searchbox in a group (Group1) (no type content), put an icon/group that when clicked resets the searchbox group (Group1). It should work…

[anna6]

Hey Diego!

Thanks for replying. I think because the location parameter which holds the location data is being sent to the page via the url it’s struggling to reset the geo searchBox. Or that the searchBox is just going back to the default value after its been cleared, which is the location.

The url on the page looks like this:
Bookings4Kidslocation=London%2C%20UK

The default value for the searchBox:
SearchBox Location –– Default value – Get location from page URL

This is the structure of the group:
– groupSearchLocation
––SearchBox Location (geo search)
–– clearSearch (icon)

Workflow:
–When clearSearch is clicked
––Step 1 - Reset groupSearchLocation

[Diego]

Hi @anna6 ! You are missing the last step. You should both reset the groupSearchLocation and clear location in the url (go to page, location=“empty”) when clicking the clearsearch icon

[anna6]

Thanks Diego,

I did try adding that as a last step. It does clear the url but it replaces with object/object:
https://bookings4kidst.bubbleapps.io/version-test/events/[object%20Object]

Also because there’s multiple inputs I need to resend the parameters to the url, it doesnt seem to replace the location.

[maheshkasindi]

Hey Anna, I did something like this address search thing recently and I think I can help you out. But I don’t seem to understand what you are trying to do.
I’ve passed the location value of Searchbox from homepage to another page where I’m displaying shops depending on this location. I’m passing location with the URL itself.

[anna6]

hey maheshkasindi, it’s actually my post. Diegos trying to help me out. I explain the issue in the first post, thanks.

[maheshkasindi]

Hey Anna, I see all your input fields are editable in the results page. You want to reset them all at once?

[anna6]

Thanks for replying.

Id like to push the search options to the second page via the url but then have the ability to clear each field or change the options and search again.

So im currently pushing the location value to the location inputs default value on the second page. I want to be able to clear that default value and search for something different but also keep the other inputs the same or search for something different.

If you check out airbnbs search you’ll see what i mean.

[maheshkasindi]

Gotchaa!
So you’re passing parameters from homepage to the results page through URL and filling those parameters as default values in the results page. Now you want to edit those default values and search afresh in the results page itself. That’s it, right?

[anna6]

That sounds about right!

Its just theres four different inputs: location, age, activities and date
They need to be clearable but still retain the data if the user wants to keep, for example, the age and date

[maheshkasindi]

So I tried editing location in the results page and retaining remaining input values. It’s all working well as far as i can see
Am I missing something?

[anna6]

So If you start on the home page, Bookings4Kids

Then choose a location, you’ll notice you can clear it with the ‘x’ icon.