Create a search bar
A search bar can help users easily filter data and find 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 taking in a user input, then changing a SQL parameter in a data node to filter the data. If a table is using that node as its data source, the table contents will reflect the output of the search.
In this tutorial, we'll reference the following table:
The first step to creating a search bar is to set up a data node with a SQL parameter. Syntax for creating parameters can differ depending on the type of data node. See Data Nodes for syntax and parameter details.
You'll want to create your query based on the type of search you'd like perform.
A 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
company_name.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 {{{stock_prices}}}
WHERE
{% if name | length > 0%}
company_name = '{{name}}'
{% else %} company_name LIKE '%%'
{% endif %};
The query can also be case-insensitive, pulling all matching records regardless of capital or lowercase letters. This is accomplished by using the
LIKE operator instead of a simple =.
Query:
SELECT * FROM {{{stock_prices}}}
WHERE
{% if name | length > 0%}
company_name LIKE '{{name}}'
{% else %} company_name LIKE '%%'
{% endif %};
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 {{{stock_prices}}}
WHERE company_name LIKE CONCAT('%', '{{name}}', '%');
You can also conduct global searches, or searches across multiple columns. This is done by adding
OR operators in the WHERE clause. The following example performs full-text searches across two columns: company_name and ticker. 
Query:
SELECT * FROM {{{stock_prices}}}
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 2mo ago