Skip to main content

How to Add a Search Box to an Interactive Directory

Completion Time: 20 minutes

This guide shows you how to let visitors type into a search box and see a directory table filter itself as they type. It works for building directories, staff lookups, product catalogs and exhibit finders.

The table does not search as such. It hides rows that do not match a rule, and the search box supplies the value the rule checks against. Each time the visitor types, the table is refreshed and the rule is checked again.

What you need​

  • A datasource with your directory entries, for example:
{
  "building_directory": [
    { "floor": 0, "room_number": "G-01", "entity_name": "Main Reception & Security" },
    { "floor": 0, "room_number": "G-02", "entity_name": "The Daily Grind Cafe" },
    { "floor": 1, "room_number": "101", "entity_name": "Apex Digital Solutions" }
  ]
}
  • A Content with a Table Widget and an Input Widget.

Step 1: Add the table​

  1. Add a Table Widget to the page.
  2. Bind it to your directory datasource and select the building_directory array, so that each entry becomes a row.
  3. Choose the columns to show, for example entity_name, floor and room_number.

Learn more: Table chart

  1. Add an Input Widget to the same page.
  2. Note the Widget's name in the Layers list (for example, userInput49). You will pick it from a list in the next step.

Learn more: Input Widget

Step 3: Hide rows that do not match​

  1. Open the Table Widget's data binding and turn on Hide rows.
  2. Add a rule:
FieldValue
Columnentity_name (the column to search in)
Evaluation typedoes not contain
Evaluation originInteractive widget
PageThe page the search box is on
WidgetYour Input Widget (for example, userInput49)
Case sensitiveOff

The rule reads: hide every row whose name does not contain what the visitor typed. Only matching rows stay visible.

Learn more: Evaluation Types

Step 4: Refresh the table as the visitor types​

  1. Select the Input Widget and open Edit touch events on its Other tab.
  2. Add the action Interact widget:
    • Page: the page the table is on
    • Widget: your Table Widget (for example, table34)
    • Special: Refresh

❓ Confirm that the Input Widget's touch events fire on every keystroke rather than only when the field is tapped or submitted. The source notes say every keystroke; this has not been checked in code.

Step 5: Test​

Open the Content in preview and type into the search box. The table should shrink to the matching rows.

Variations​

  • Empty search shows everything. With an empty search box, no row is hidden. ❓ Confirm on a device.
  • Search more than one column. Add a second Hide rows rule, for example on room_number. ❓ Confirm the name of the AND/OR switch between rules in the editor and which setting gives "match in any column".
  • Buttons instead of free text. For fixed choices, such as floors, use buttons or a dropdown instead of typing. Learn more: Dropdown Filtering Setup
  • Show details on tap. Open a popup with the full entry when a row is tapped. Learn more: Table Row Popup