➡️➡️➡️ Smart Fuzzy Search for Bubble Native Mobile 🔍✨
A fast, typo-tolerant search element for native mobile apps. Finds results despite misspellings, missing accents, half-typed words and words typed in any order. Searches up to three database fields plus any Bubble expression you want. Relevance ranking, search operators, a styled search box included, and workflow events for every stage.
────────────────────────────────
TRY IT
────────────────────────────────
DEMO:
https://plugins-testing-46093.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=searchEDITOR:
https://bubble.io/page?id=plugins-testing-46093&tab=Design&name=search&type=page&elements=bTJOF────────────────────────────────
HOW IT MATCHES
────────────────────────────────
•
Typo tolerance that scales with the word. A three-letter word stays exact, because forgiving a letter in "sol" would also match sal, col and sur. A ten-letter word gets real room. You never tune a numeric threshold — you pick strict, normal or loose.
•
Swapped letters count as one mistake, not two. zpaatos finds Zapatos. That is the typo people actually make on glass, and it still lands on the right result.
•
Accents ignored in both directions. jose finds José and
José finds jose. Also ñ, ü, ç, ß, æ, œ, ø and the rest of Latin — nobody has to long-press a key to find their own name.
•
Words can live in different fields. Search "camiseta zara" and it finds the shirt whose name matches one word and whose brand matches the other. Every word must appear, but not all in the same place.
•
Partial words work from the second letter. Results narrow as the user types, not only when they finish.
•
Non-Latin alphabets left untouched. Cyrillic, Greek, Arabic, Hebrew, Japanese and Chinese keep working normally.
────────────────────────────────
RELEVANCE YOU CAN EXPLAIN
────────────────────────────────
•
Six ranking steps, in plain order. Whole-field matches first, then fields starting with the term, then whole words, then words beginning with it, then anything containing it, and typo matches last.
•
Field order is field importance. The first field you pick counts most, the second slightly less. No weights to guess at, no configuration.
•
Ties broken sensibly. A match nearer the start of the text wins, then your list's original order. The same search always returns the same list — no reshuffling between keystrokes.
•
A 0–100 relevance score per result, exposed as a state if you want to show or filter by it.
────────────────────────────────
SEARCH OPERATORS
────────────────────────────────
Typed straight into the box, no extra UI to build:
jacket cotton both words must appear
"navy blue" that phrase, literally, in order
jacket -kids jackets, excluding kids'
A hyphen inside a word never excludes anything, so T-shirt searches normally.
────────────────────────────────
THE SEARCH BOX IS INCLUDED
────────────────────────────────
•
Search icon, clear button and focus ring in your accent color, with corner radius and height you control.
•
Light and dark mode following the phone automatically, or forced either way.
•
Inline autocomplete. The rest of the word appears in grey behind the cursor, taken from words that exist in your data, and the keyboard's search key accepts it.
•
Or use your own input. Turn the box off, point the query property at your input's value, and everything else works the same.
────────────────────────────────
SET UP IN FOUR FIELDS
────────────────────────────────
Drop the element on the page and fill in: data type, data source, and the fields to search — picked from a dropdown, not written as expressions. Point a Repeating Group at the results state.
That is the whole setup. The full list shows when the screen opens and filters as the user types, with no workflow anywhere.
────────────────────────────────
BUILT FOR REAL CATALOGUES
────────────────────────────────
•
See what users can't find. A no_results event fires on every empty search. Log the term in one workflow and you get a running list of what people look for and you don't have — mislabelled, missing or out of stock. It is one of the most useful reports a catalogue can give you.
•
"Did you mean…?" when nothing matches. The closest real word from your own data, plus an action that applies it in one tap.
•
Reach related data types. An optional advanced property searches anything you can express in Bubble — a brand's name, a category, a joined list of tags.
•
Plain text lists work too. No custom data type needed.
•
Minimum characters, maximum results and typing delay as properties.
•
Two search elements on one screen, kept apart by ID.
•
A diagnostic overlay that shows how many items arrived, which field is being read, what value it got and how many results came back. Debugging by screenshot instead of by guesswork.
────────────────────────────────
FULL WORKFLOW CONTROL
────────────────────────────────
•
8 states — results, result count, relevance scores, has results, is ready, is searching, current query and suggestion.
•
4 events — Data is ready, Search finished, No results found, Query changed.
•
4 actions — Search, Clear search, Rebuild index, Use suggestion.
•
24 properties covering data, matching behaviour and the look of the box.
────────────────────────────────
FAST
────────────────────────────────
Your text is prepared once, when the data arrives — not on every keystroke. The index is built in small batches with the screen released between them, so it never freezes while loading, and every search after that is a lookup against prepared data.
Built with the React Native core only: no external search, animation or gesture libraries, so there is nothing to break and nothing to configure at build time. Works on iOS and Android.
────────────────────────────────
Questions or a feature you need? Get in touch —
info@technocode.agency
Built on Bubble
