Create a search bar
A search bar can help users easily filter data and find the content they're looking for.
This tutorial will walk through how to use a Search Bar to find data. For other ways to filter, see Create a filter.
The search bar works by accepting user input, then changing a SQL parameter in a data node to filter the data accordingly. If a table is using this specific data node as its data source, the table contents will reflect the output of the search.

In this tutorial, we'll reference the following table:

company_daily_stock_price
The first step to creating a search bar is to set up a data node with a SQL parameter. Drag a data node into the canvas, then double click to open it. Syntax for creating query and parameters can differ depending on the type of data node. See Query Nodes for syntax and parameter details.
The following searching examples are all queries made in PostgreSQL query nodes. To create such a query node, locate the
company_daily_stock_price
in table node list and create a query node from it.
Create the query node from
company_daily_stock_price
table nodeA basic search will find all records that match the search value exactly. For example, let's say we want to search based on the column
ticker
.First, we need to insert a parameter to represent the search value. Click the plus button
at the parameter panel to add a parameter. In the example below, I add a string parameter named "name", and set the default value to "" (empty string).

The following query will pull records that match the company name exactly, including capital and lowercase letters. If there is no search value, the entire table will be displayed.

Query:
SELECT *
FROM company_daily_stock_price
WHERE ticker = '{{name}}' or '{{name}}' = ''
The query can also be case-insensitive, pulling all matching records regardless of capital or lowercase letters. This is accomplished by adding LOWER() function at both.

Query:
SELECT *
FROM company_daily_stock_price
WHERE LOWER(ticker) = LOWER('{{name}}') or '{{name}}' = ''
A full-text search will match all records that contain the search value. This will require us to turn the parameter value into a regular expression, or Regex, using the
CONCAT()
function. The following query will concat a
%
symbol to either end of the parameter value. This tells the query to match all records that contain the search value, regardless of additional characters preceding or following it. It is also case-insensitive. For example, the searches
App
, ple
, and apple
will all match with Apple Inc.
. When there is no search value, all records will be matched.You may also construct other regex patterns to further customize your search.

Query:
SELECT *
FROM company_daily_stock_price
WHERE ticker LIKE CONCAT('%', '{{name}}', '%');
In addition to a regular full-text search, you can perform a case-insensitive search by applying the
LOWER()
function to both expressions that surround the LIKE
operator. This will ensure that the search is not sensitive to uppercase or lowercase characters, allowing for a more flexible search.
Query:
SELECT *
FROM company_daily_stock_price
WHERE (LOWER(ticker) LIKE CONCAT('%',LOWER('{{name}}'),'%'));
By using the
LOWER()
function, the company_name
and search name
values are converted to lowercase before comparison, enabling case-insensitive matching. This means that regardless of whether the characters are uppercase or lowercase, the search will match the corresponding records.In addition to individual column searches, you can perform global searches that search across multiple columns. This can be done by adding
OR
operators in the WHERE
clause. The following example performs full-text global searches across two columns: company_name
and ticker
. 
Query:
SELECT *
FROM company_daily_stock_price
WHERE company_name LIKE CONCAT('%', '{{name}}', '%')
OR ticker LIKE CONCAT('%', '{{name}}', '%');

The search bar has a supported Search event that is triggered when a user clicks on the Search button or when the user presses Enter.
Use the search event to create an interaction on the search bar to set the SQL parameter in your data node. In the action parameters, use
${event.value}
to access the user's search value.
Last modified 20d ago