To get the most out of the Advance Multicolumn Searchbox, follow these instructions to configure the properties, manage data states, and set up workflows.
🛠️ 1. Configuration (Appearance Tab)
Set up these fields in the Bubble Editor to define how your search works and looks.

Property                  Description
Table                        Select the Type of Content (e.g., Payments) that you want to search through.
Data List                  Provide the source of data. Usually: Do a search for [Table].
Column 1 to 10      Select the specific fields you want the search to check against. You can search up to 10 columns simultaneously (e.g., Name, Email, Reference ID).
Display Field            Choose which field should be shown in the dropdown list and as the final value in the input box after selection.PlaceholderThe "ghost" text shown in the input before the user starts typing (e.g., "Search by name or ID...").
Initial Value              Set an optional default record to be selected when the page loads.


📊 2. Exposed States
Use these states to display information or filter other elements on your page based on the search box activity.

- selectedItem: This holds the single record the user clicked on from the dropdown. Use this for "View Details" groups or to trigger specific data changes.
- results: A list of records matching the current search term. Use this as the data source for a Repeating Group if you want to show search results on the page rather than just in the dropdown.
- searchText: The raw text currently typed into the input. Useful for custom logic or showing "No results found for [searchText]".


⚡ 3. Events & Workflows
The plugin triggers an event so you can automate actions in the Workflow tab.The Changed EventThis event triggers every time a user makes a selection or clears the input.

Go to the Workflow tab.
Click "Click here to add an event" > Elements > An AdvanceSearch's value is changed.
Example Action: "Navigation" > "Go to page" (Send the selectedItem to a details page) or "Display data" in a group.


💡 4. Best Practices
- Handling Large Datasets
If your table has thousands of records, the browser might slow down while filtering.
- Server-side Filter: In the Data List property, add constraints to the Do a search for (e.g., Active = "yes") to limit the data sent to the plugin.
- Privacy Rules: Ensure your Bubble Privacy Rules are set correctly. The plugin will only ever see data that the Current User is permitted to see.
- Highlighting & UIThe search box automatically highlights the matching text within the dropdown.
- A loader spinner will appear on the right side of the input automatically if Bubble is still fetching data from the server.
- If the dropdown appears "shifted," ensure the Searchbox is not placed inside a group with restricted overflow or unusual relative positioning.


❓ 5. Troubleshooting
- Dropdown not appearing? Ensure the Display Field is set and that the Data List actually contains records.
- "No plugin preview available": This is normal in the editor. Refer to the placeholder "Start typing..." style to gauge the element's size on your page.
- Search feels slow? Check your console for NotReadyError. This is Bubble fetching data. It will resolve itself once the data is cached in the browser.


Demo Editor URL: https://bubble.io/page?id=hks-demos&test_plugin=1776781580465x480483604747255800_current&tab=Design&name=advanced_multicolumn_searchbox&type=page&elements=cmNHx

Demo Page URL: https://hks-demos.bubbleapps.io/version-test/advanced_multicolumn_searchbox?debug_mode=true