# 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](https://docs.acho.io/app-builder/app-construction/elements/form-elements/search-bar "mention") to find data. For other ways to filter, see [create-a-filter](https://docs.acho.io/app-builder/popular-use-cases/create-a-filter "mention").

The search bar works by accepting user input, then changing a SQL parameter in a **Query** to filter the data accordingly. If a table is using this specific query node as its data source, the table contents will reflect the output of the search.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F4e3GzExfoDl8WJYDcOdb%2Fimage.png?alt=media&#x26;token=ed48eff3-6be6-4596-9ff9-890c3dd1e069" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FlS9YY9O8PvUJOVlPdRxy%2Fimage.png?alt=media&#x26;token=1c282840-79f8-474c-ae18-d7ff77634a78" alt=""><figcaption><p>company_daily_stock_price</p></figcaption></figure>

## Setting up the Query

The first step to creating a search bar is to set up a **Query** with a SQL parameter. Add a **Query** from your **Table**, then double click to open it. Syntax for creating query and parameters can differ depending on the type of the database. See [query](https://docs.acho.io/app-builder/app-construction/query "mention") for syntax and parameter details.

The following searching examples are all queries made in PostgreSQL query nodes. To create such a **Query**, locate the `company_daily_stock_price` in table node list and create a **Query** from it.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FJ3JAOqTzUHA2lfvBST2z%2Fadd-query-node.gif?alt=media&#x26;token=71d78713-47ed-45d9-b8c8-74542f5c9a13" alt=""><figcaption><p>Create the query node from <code>company_daily_stock_price</code> table node</p></figcaption></figure>

### Basic search

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 `ticker`.

First, we need to insert a parameter to represent the search value. Click the plus button ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FzrEGf4EtAhGYzOYNGbaP%2Fimage.png?alt=media\&token=0434ded5-9ae5-4887-8732-32409fccc42d)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).

#### Basic search: Case-sensitive

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.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FgAKtjWfsBzzGS2cnRT4r%2Fimage.png?alt=media&#x26;token=70543720-cf05-4ae5-b408-548a3ccb412c" alt=""><figcaption></figcaption></figure>

Query:

```sql
SELECT * 
FROM company_daily_stock_price
WHERE ticker = '{{name}}'  or '{{name}}' = ''
```

#### Basic search: Case-insensitive

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.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FhR6XTsXGHUk1RsI7abRm%2Fimage.png?alt=media&#x26;token=7aa1fc2c-b7bb-4b0d-b09f-e0e4d5742383" alt=""><figcaption></figcaption></figure>

Query:

```sql
SELECT * 
FROM company_daily_stock_price
WHERE LOWER(ticker) = LOWER('{{name}}')  or '{{name}}' = ''
```

### Full-text search

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](https://dataschool.com/how-to-teach-people-sql/how-regex-works-in-sql/), using the `CONCAT()` function.&#x20;

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.&#x20;

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.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FU6wfm9ITU1efb6BezWsJ%2Fimage.png?alt=media&#x26;token=63a9a7a3-079e-4fec-88ba-71ad14e45753" alt=""><figcaption></figcaption></figure>

Query:

```sql
SELECT * 
FROM company_daily_stock_price
WHERE ticker LIKE CONCAT('%', '{{name}}', '%');
```

### Full-text Search(Case-insensitive)

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.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FHzwAxJuZZ9PK35vKfUfh%2Fimage.png?alt=media&#x26;token=79c5413b-397f-4d64-852b-67f80b0c07d5" alt=""><figcaption></figcaption></figure>

Query:

```sql
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.

### Global search

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`.&#x20;

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2Fc0yRYZtd35xhNttXV18e%2Fimage.png?alt=media&#x26;token=93955fa2-f920-42dc-973a-770f3c7e0b2e" alt=""><figcaption></figcaption></figure>

Query:

```sql
SELECT * 
FROM company_daily_stock_price
WHERE company_name LIKE CONCAT('%', '{{name}}', '%')
    OR ticker LIKE CONCAT('%', '{{name}}', '%');
```

## Search by filtering the data

Once the node is ready, create a search bar on your page by using the [search-bar](https://docs.acho.io/app-builder/app-construction/elements/form-elements/search-bar "mention") element group.&#x20;

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FO5FOkpPOL3LZIjE5jOU2%2Fimage.png?alt=media&#x26;token=2f987175-1981-4305-bc99-fe2355c92731" alt=""><figcaption></figcaption></figure>

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 **Query**. In the action parameters, use `${event.value}` to access the user's search value.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2Flq3q00Y4MKIrYpURBEsJ%2Fimage.png?alt=media&#x26;token=9fc5b0ea-3907-48e9-95f5-6bd22b144bf4" alt=""><figcaption></figcaption></figure>
