Yes, it is best practice with anything to reduce your dependence on outside sources. So in bubble, as much as you can build without plugins, it is sage advice to follow, those features should be built without a plugin.
The time to use a plugin, free or paid, would be when it is not possible to get the same functionality through basic Bubble features.
What I used to do was build a group called ‘Drop Container’ and put inside of it an input element and any necessary accompanying icons. This is used as the ‘dropdown’ portion where a user will click the icon to open the dropdown.
Then create a group focus element to attach to the Drop Container. Inside of the groupfocus add a repeating group. Set it up with your necessary elements for display, plus the data type and source. It is important to have constraints that will reference the input elements value to match against (use contains operator) the values in your data set for the field you target the search by (CPV).
It is best to ensure the cpv codes are lowercase, and that you translate the input element value into lowercase. Easiest and most versatile way to do that is to add a group with a type set to text and the value set to the input elements value (use lowercase and trimmed operators) which is ultimately what is used in the filters constraints.
Making use of lowercase just eliminates complexities of matching based on differences in the dataset and the user input value as capitalization does impact matching.
If these values are fetched via an API call, you can filter that based on the key of CPV and the input formatted value (the group value).
This had been my approach for years. It gives complete control over the design of the dropdown choices for users to select from.
Where is the dataset coming from? You mention trying to load them into the DB or option sets as the list is large.
If you want another method of loading them and then searching them using your own custom build dropdown, consider doing something like this below:
- Setup API connector:
- Upload the JSON file of your dataset into an Option attribute in your Bubble app
-
Click the little ‘see’ text button next the file uploader in the attributes after uploading the json file and copy the URL from the browser.
-
Go back to API connector and paste that url in as the url of the API call.
-
Initialize the call and map the keys to the type of data they are supposed to be.
- Go to your repeating group as your suggested matches/display and set the datasource to be that of your api call through ‘get data from external api’ and make sure the data type is set the right type.
What this setup does for you, since it sounds like the dataset doesn’t change and from that link to a 300+ page pdf document, likely doesn’t have an API and so might only be in a spreadsheet somewhere, is to import that dataset into your Bubble app storing it in your Bubble App data storage on your Bubble app Amazon bucket. Then using that link as the api call address and initializing, you are creating a data type object you can work with as any other type of data in bubble dynamic expressions, and so can setup your custom searchbox as described above.
It also will return the 9,000 objects without performing any search of your database, so you only get charged WUs for the characters returned. Additionally, you will only be filtering client side the data which isn’t even really in your Bubble DB (at least not as custom data type entries or option set values), and so will experiencing quick enough filtering.
That should be sufficient to load the 9,000 entries fast enough, cheap enough and in the entire dataset so you can set this up without a plugin.
