Jquery Script that lets you do PARTIAL text SEARCH

Tips
1

I was searching for the forums for how to implement partial text matching (basically the “like” operator in SQL)

I have seen the posts about using Regex patterns, creating word lists… etc… but that’s way more than what I need.

I tried using “Any field contains”. Though it doesn’t do partial word searching. ie: if you type “choc” hoping to find an item containing the word “chocolate”, this won’t do the job.

image
image909×744 65.9 KB

So what are your other options?

Answer: avoid using Bubble’s searching function altogether and hack up a search input box instead using Jquery that DOES allow you to do partial text matching.

Here is how to implement it:

  1. Create an input box anywhere on your page and make sure it has the ID “searchinput” (bottom of Apperance panel. If you don’t see this box, go to settings in bubble )

image

  1. Give your Repeating group an ID of “RepeatingGroup”

image

  1. Add an HTML element onto your page (with 1px width and height) and insert exactly this HTML into the box: Bubble-JS-and-CSS-hacks-and-tricks/search.js at main · mayurjobanputra/Bubble-JS-and-CSS-hacks-and-tricks · GitHub

Here’s how the script works:

  1. The script sets a delay of 1 second (1000 milliseconds) before executing the search to avoid performing the search for every keystroke.

  2. It retrieves the search input element with the ID “searchinput” and the repeating group element with the ID “RepeatingGroup”.

  3. The script creates an object called “originalDisplay” to store the original display property of each child div in the repeating group. This object is used to restore the original display property when the search input is empty.

  4. The performSearch function is responsible for performing the search. It retrieves the search input value, trims and converts it to lowercase for case-insensitive matching.

  5. The function iterates over each child div in the repeating group. For each child div, it stores the original display property based on its class name if it hasn’t been stored before.

  6. If the search input is not empty, the function checks if the child div contains the search text. If it doesn’t, the child div is hidden by setting its display property to “none”. Otherwise, the child div is displayed using the original display property stored earlier.

  7. On the “keyup” event of the search input, a timeout is set to execute the performSearch function after the specified delay. This ensures that the search is only performed after the user has finished typing.

  8. On the “input” event of the search input, when the input value changes, the script checks if the input is empty. If it is, it iterates over each child div and restores the original display property using the class name from the “originalDisplay” object.

Features

  • partial-text search
  • case-insensitive

Known Limitations:

  • It won’t affect or modify any other controls on the page (like counters you have setup for example. You might need to tweak the script to adjust the counters as well)
  • If you trigger a popup from a repeating group, it doesn’t search inside that popup. It will only work on information already present and displayed inside the repeating group only.
  • It searches all data inside the each of repeating group items without regard for specific fields you might want to search

If you still have questions, please leave a comment

2

I just realized that if you want to search inside of content that doesn’t show up inside your RepeatingGroup by default (like a popup), you can still make this search work by adding a field into the row and making it 1px square. The script should search inside all the HTML.

Needs testing

3

OK, I hacked the search not working if the content doesn’t appear fully in your RG. If you have this issue, what you can do is add a text box with all the content you want searched, and give the text inside it a font size of 1px.