Search

Search elements help users find items in a list. In WeWeb, you can use a ready-made search element from the Add panel, or build the same pattern with a regular Input. Either way, the important part is the same: take the search value, pass it into a filter (often a table view parameter), and refresh the data.

Features

• Ready-made search UI: Use a search input, or a search input with a results dropdown, from the Add panel
• Filter with a table view: Pass the search value into a view parameter so results update as the user types
• Debounce: Slightly delay filtering so you do not refetch on every keystroke
• Highlight matches: Style the matching part of each result with a formula

Getting started

Using AI

The quickest way to set up search is by using AI:

1. Ask AI to add a search input above a list or Data Grid. Make sure to specify:
   • Which table view (or list) should be filtered
   • Which fields should match the search (for example name and email)
   • That the search should use debounce
2. The AI will create the search input and wire it to your data.
3. Continue refining by asking:
   • "Add a search parameter to my table view and filter name Contains that parameter"
   • "Debounce the search by 300ms"
   • "Highlight the matching search term in yellow in each result"

Manual setup

1. Add a Search element (or an Input) to your page from the Add panel
2. Place it above the list, cards, or Data Grid you want to filter
3. Make sure your data comes from a table view that can accept a search parameter
4. Connect the search value to that parameter, then refetch the view when the value changes
5. (Optional) Turn on Debounce so filtering waits until the user pauses typing

READY-MADE VS CUSTOM

The filtering logic is the same whether you use a ready-made search element or a normal Input. Ready-made elements mainly save you styling and layout time.

Filter data with a search term

Most search experiences follow this pattern:

1. The user types in the search element
2. That value is stored in the element's exposed variable (usually value)
3. You pass that value into a table view parameter
4. The table view filter uses the parameter (for example name Contains search)
5. You refetch the table view so the list updates

1. Prepare the table view

1. Open the Data & API tab, then open the Tables subtab
2. Open the view that powers your list
3. Click Parameters and add a text parameter (for example search)
4. Click Filter and add a rule that uses that parameter, for example:
   • name Contains search
   • Or a group: name Contains search Or description Contains search
5. Turn on “apply only if value exists” (or the equivalent option) so an empty search does not hide all rows

Learn more about view parameters →

2. Bind the search value and refetch

1. Select your search element
2. In the right panel, open the Workflows tab
3. Add a workflow on the change trigger (or the equivalent value-change trigger)
4. Add a Table View: Fetch action
5. Pass the search element's value into the view's search parameter

USE THE ELEMENT VARIABLE

You usually do not need a separate global variable. Bind the search element's own value variable directly into the fetch action.

3. Add debounce

Without debounce, every keystroke can trigger a new fetch. That feels slow and can create unnecessary backend load.

1. Select the search element
2. In the right panel, open the Settings tab
3. Enable Debounce
4. Set a short delay (often around 300ms)

The workflow still runs on change, but only after the user pauses typing.

Highlight search terms in results

If you want matching text to stand out in each result, bind the result text to a JavaScript formula that wraps matches in a styled <span>.

Example formula:

/* Declare your search term variable */
const search = {searchInputVar}

/* Define your regular expression */
var regEx = new RegExp("("+search.replace(/([\^\$\.\\\(\)\[\}\{\}\+\*\?\<\>\=\-\|\:\!\&])/g, '\\$1')+")" , "ig");

/* Sanitize the result text */
const sanitizedText = wwFormulas.sanitize({searchResultText})

/* Style the matching text */
return search ? sanitizedText.replace(regEx, `<span style="color:red; background: yellow">$1</span>`) : sanitizedText

Replace:

• {searchInputVar} With your search input variable (without the {} wrappers)
• {searchResultText} With the text from the current result (without the {} wrappers)

USE A GLOBAL FORMULA

It can be easier to write the formula directly on one result first. Once the highlight looks right, turn it into a global formula with parameters so you can reuse it across the project.

Example use cases

• Product catalog: Filter products by name as the user types
• User directory: Search across name and email with one input
• Help center: Filter articles, then highlight the matching phrase in titles
• Admin table: Combine search with other view filters such as status or date range

Best practices

Do:

• Filter in the table view when the dataset can grow large
• Debounce search inputs that trigger fetches or API calls
• Apply the search filter only when the value is not empty
• Search the fields users actually look for (name, email, title, and so on)

Don't:

• Refetch on every keystroke without debounce
• Load every row into the browser only to filter them in a formula when the list is large
• Leave an empty search filter active in a way that returns zero rows
• Hard-code the highlight formula in many places if a global formula would be easier to maintain

Forking

While the Search element offers useful built-in options, you may need behavior beyond what is available out of the box. In those cases, you can fork the element and customize it.

If you are unsure how to fork an element, see the dedicated documentation.

Forking example: recent searches

One reason to fork Search would be to show recent searches under the input:

Fork the search element to show up to 5 recent search terms under the input. Save each submitted search, let users click a recent term to refill the input, and keep the existing debounce and value behavior.

Properties reference

Ready-made search elements are built around an input. The settings you will use most often are:

Settings

Property	Options/Type	Description
Placeholder	Text	Hint text shown when the input is empty
Debounce	Boolean	Delays change handling until the user pauses typing
Debounce delay	Length	Wait time before the change is applied (for example 300ms)

If you use a standard Input instead, you can also configure options such as Initial value, Read only, and Required. Learn more about Input →

Styling

Style the search field in the Style tab (background, border, radius, padding, typography, and icons), the same way you would style other inputs.

Event triggers

Use the change trigger on the search element (or Input) to refetch your table view when the value updates.

Check the Workflows tab on the selected element for the exact triggers available in your project. If you build search with a standard Input, see the Input event triggers →.

Exposed variables

Search inputs expose a value variable with the current search term. Use it when binding filters, fetch parameters, or highlight formulas.

If the variable name differs slightly for a ready-made search element, open the Debug panel, then the Variables tab, and look for the selected element's variables.

Component actions

Ready-made search elements typically do not expose component actions. If you need custom methods, fork the element or drive the flow from workflows instead.

Frequently asked questions

Should I filter on the frontend or in a table view?

If the list is small and already loaded, a frontend filter can be fine. For larger datasets, add a search parameter on the table view and filter there so the browser only receives matching rows.

Why does my list flash or feel laggy while typing?

Turn on Debounce and use a short delay. That way the fetch runs after the user pauses, not on every character.

Can I search more than one field?

Yes. In the table view filter, create a condition group with Or rules, for example name Contains search Or email Contains search.

Why do I get no results when the search box is empty?

Your filter is probably still applied with an empty value. Configure the filter to apply only when the search parameter has a value.