Hi, I have created my own searchbox element (with an input and a repeating group) so that I can have a searchbox function with API data; as far as I know you cannot currently use searchboxes with data from an API. I am trying to make my own searchbox identical to the existing bubble one, so I was wondering how to make a dynamic part of the returned text (in the repeating group) bold. I only want the inputs value in the results to be bold, just like the bubble searchbox. Thanks in advance for the help!
1 Like
It is possible. But it will be slow. See the demo below:
It is simply splitting current cell’s text by the searched value and them merging them back (format as text in bubble) with the searched value but adding a bold around the searched value on the way.
Current Cell’s Artist’s Name is just a text.
Let’s see the split by:
And let’s see the format as text:
This text is the splitted text of the Name. (because split by returned a list of smaller chunk of the Name). And the list is merged with the search value with to make it bold as delimiter.
Of course, I didn’t filter the repeating group to show the effect but you can also filter the repeating group if you wish.
You may be able to speed it up with the instant text input plugin.
1 Like
Great suggestion. Thanks @chris.williamson1996
Below is without live text and with live text plugin 
All I have changed:
- Install this plugin: Instant text Plugin | Bubble
- Enable IDs from Bubble General App Settings (very down below):
- Set ID to the search box:
- Add livetext element to the page somewhere and put the ID of the search box.
- Update the dynamic texts to LiveText A’s value instead of SearchBox’s Value in split by and format as text
1 Like
Thanks a lot for the help. This works perfectly, especially with the live text, except that it is case sensitive. Do you know if there is a way to make it not case sensitive, or would I have to do multiple split by, with :lowercase/:uppercase/:capitalised etc. Originally I tried find & replace, finding the inputs value and replacing it with a bolded version, however because that was also case sensitive, I had to have multiple find & replaces to cover all scenarios. This then made a new issue where if the user only searched ‘b’ then the results would include the [b] for making the results bold.
Probably you have to do multiple split bys. Because when you merge them back, you would have to merge back with the original casing of the search box. But even in this case, this would create problems if the search text box has varying cases (lower and upper together). Need to test more.
And about the b, yes. There might be weird extreme cases. Like if someone’s name has [b] in it, and when I search for anything that hits his/her name, it becomes bold
My entire databases are saved in lowercase typically unless it’s a specific reason not to (like a long form user description). That way all my searches use fields value :lowercase.
Then in front end things like titles are displayed :capitalized words for example.
Case sensitivity in bubble is incredibly obnoxious.
I tried multiple split bys and had the same issue as the find & replace. With the b issue, I am not talking about how the actual result had or , as I think that is a very edge-case scenario. I am saying I would get an error where it would display the [b] that makes the text bold; it is not part of the original result, but shows up in the text returned. This is because I had multiple split by, trying to cover every scenario to not make it case sensitive. So if a user searched ‘car’ then ‘Car’, ‘CAR’, and ‘car’ would all appear bolded. However for some reason if in the input they only type b, then it would show the [b].
That’s definetly a good practice, however my issue is that I am getting the data from an API, so as far as I know I cannot convert the results into all lowercase.