LogoLogo
ProductsPricingGlossary Launch Acho
  • 🎉Welcome
  • Introduction
  • What is Acho?
  • How does Acho work?
    • Proof of Concept (PoC)
  • App Builder
    • Get Started
    • Core Concepts
    • Overview
    • App construction
      • App Configuration
      • Pages
      • Interactions
        • Add an interaction
        • Add conditions to interactions
        • Event payload
        • Ordering interactions with action flow
        • Transformer
        • Actions
          • Navigation
          • Element
          • Data Source
          • App
          • Page
          • API Service
          • Database
          • Media Service
      • Table
      • Metric
      • Query
      • Data Store
      • Elements
        • Table & Chart
          • Searchable Table
          • Table
          • Chart
          • Score Card
        • Form Elements
          • Form
          • Search Bar
          • Checkbox
          • Date Picker
          • Custom Form
          • Input
          • Multiselect
          • Radio Button
          • Radio List
          • Rich Text Editor
          • Select
          • Switch
          • Textarea
          • Upload
        • Web Elements
          • Badge
          • Button
          • Clickable
          • Collapse Menu
          • Divider
          • Icon
          • Image
          • Link
          • Message
          • Modal
          • Notification
          • Pagination
          • Popover
          • Rate
          • Rich Text
          • Tabs
          • Text
        • Layout Elements
          • Container
          • List
        • Advanced elements
          • Code Block
          • Condition
          • Print
        • CSS Styles
          • General techniques
          • Layout
          • Spacing
          • Size
          • Position
          • Typography
          • Background
          • Border
          • Effect
        • Form Check
        • Tooltip
      • Accessors
      • Plugin Store
    • Popular Use Cases
      • Build a chart from Table Nodes
      • Create a table
      • Create a list
      • Create a filter
      • Create a search bar
      • Use Custom Form Container to collect user inputs
      • Drill down on a table
      • Download file from query node
      • Set loading animations
      • Modify a database
      • Navigate to a different page
      • Set up dynamic routing
      • Update app data using accessors
      • Create a Chart with Code Block and D3 Library
      • Rich text and rich text editor
      • Send an Email via Mailjet Plugin
    • Preview
    • Publish
      • Embed published app on website
    • Version Control
    • App User Management
      • Onboarding Page
      • Sign in page
      • Guest Isolation and Private Session
    • Theme
    • FAQ
  • Acho Studio
    • Quick Start
    • Resources
      • Add a resource
      • Supported data sources
        • Airtable
        • Amazon Ads
        • Amplitude
        • Amazon Seller Partner
        • Apify Dataset
        • Appstore
        • Asana
        • API Connector
        • API Template
        • AWS CloudTrail
        • Azure Table Storage
        • Batch Files
        • Bamboo HR
        • BigCommerce
        • BigQuery
        • Bing Ads
        • Braintree
        • Cart.com
        • Chargebee
        • Chargify
        • Chartmogul
        • Clickhouse
        • Close.com
        • CockroachDB
        • Confluence
        • Customer.io
        • Delighted
        • Dixa
        • Drift
        • Facebook Marketing
        • Freshdesk
        • Freshsales
        • Freshservice
        • GitHub
        • GitLab
        • Google Ads
        • Google Analytics
        • Google Sheets
        • Google Search Console
        • Greenhouse
        • Harness
        • Harvest
        • HubSpot
        • IBM Db2
        • Instagram
        • Intercom
        • Iterable
        • Jenkins
        • Jira
        • Kafka
        • Klaviyo
        • Kustomer
        • Lemlist
        • Lever Hiring
        • LinkedIn Ads
        • Linnworks
        • Mailchimp
        • Marketo
        • Microsoft Teams
        • Mixpanel
        • Monday
        • MongoDB
        • MySQL
        • My Hours
        • NetSuite
        • Notion
        • Okta
        • OneDrive
        • OneSignal
        • Oracle DB
        • Outreach
        • PagerDuty
        • Paypal Transaction
        • Paystack
        • Pipedrive
        • PersistIq
        • Pinterest
        • Plaid
        • PostgreSQL
        • PostHog
        • PrestaShop
        • Qualaroo
        • QuickBooks
        • Recharge
        • Recurly
        • Remote File
        • S3
        • Salesforce
        • Salesloft
        • SearchMetrics
        • Sendgrid
        • Sentry
        • Short.io
        • Shopify
        • Single File
        • Slack
        • Smartsheets
        • Snapchat Marketing
        • Snowflake
        • SQL Server
        • Square
        • Stripe
        • SurveyMonkey
        • Tempo
        • TikTok Marketing
        • Trello
        • Twilio
        • Typeform
        • VictorOps
        • WooCommerce
        • YouTube Analytics
        • Zendesk Chat
        • Zendesk Sunshine
        • Zendesk Talk
        • Zendesk Support
        • Zenloop
        • Zoho CRM
        • Zoom
        • Zuora
    • Data Prep (Projects)
      • Create a Data Prep Project
        • Create a table tab
        • Copy a table tab
        • Hide a table tab
      • Apply an action
        • View
          • Hide Columns
          • Filter
          • Sort
          • Cut
          • Rename
          • Move Column
        • Combine Tables
          • Join
          • Union
        • Transformation
          • Pivot Table
          • Unpivot
        • Data Cleaning
          • Cleanse
          • Replace
          • Change Type
          • Deduplicate
          • Split
          • Flatten
        • Tools
          • Formula
          • SQL Editor
            • SQL Editor Queries
            • All functions in Formula/SQL
              • Mathematical Functions
              • String Functions
              • Date Functions
              • Datetime Functions
              • Time Functions
              • Timestamp Functions
              • Conditional Functions
              • Type Conversion
              • Other Functions
        • Reserved Keywords
      • Pipeline
      • Edit your pipelines
      • Generate column summary for inspection
      • Use URL to access and share your project
      • Write a description for your project
      • Delete a resources/project/tab
    • Data Flow
      • Export data
        • Download CSV files
        • Excel Connector
        • Google Sheets Connector
        • Embed a table on your website
          • Data Usage Agreement
        • Apache Superset
        • Chartio
        • Looker
        • Metabase
        • Power BI
        • Qlik
        • Tableau
        • MongoDB
        • MySQL
        • MSSQL
        • Snowflake
        • PostgreSQL
        • BigQuery
    • Set up Data Sync
    • FAQ
  • Organization
    • Get started
    • Create an organization
    • Invite people to your organization
    • Share your resources
    • Share your projects
    • Share your apps
    • Change payment method on file
  • FAQ
    • I can't find data after uploading a big CSV file
Powered by GitBook
On this page
  • Setting up the Query
  • Basic search
  • Full-text search
  • Full-text Search(Case-insensitive)
  • Global search
  • Search by filtering the data

Was this helpful?

  1. App Builder
  2. Popular Use Cases

Create a search bar

PreviousCreate a filterNextUse Custom Form Container to collect user inputs

Last updated 1 year ago

Was this helpful?

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

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

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

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.

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.

Query:

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.

Query:

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

Full-text search

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}}', '%');

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.

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.

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.

Query:

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 element group.

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.

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).

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 , using the CONCAT() function.

Regex
company_daily_stock_price
Create the query node from company_daily_stock_price table node