Advanced Algolia Search πŸ•΅οΈ

Easy to use plugin to implement blazing fast search through thousands of data records.

πŸ”— Links

​Demo | Editor​

​Plugin Page​

​Forum​

ℹ️ Introduction

This plugin is the easiest way to bring blazing fast search using Algolia into your Bubble app.

What Is Algolia?

Your users almost certainly use at least one of YouTube, Amazon, and Facebook. An essential feature that these big websites share is great search. The reason they have great search is because they have hundreds (if not thousands) of people working on it full-time.

Because your users are constantly exposed to great search on these platforms, they expect to find it on every site and application that they use. But your company isn’t a search company: it doesn’t make sense for you to hire a dedicated team of developers to reinvent search.

Algolia provides software and tools to help you implement efficient, flexible, and insightful search on your sites and applications.

What can Algolia do for my users?

Algolia provides your users with a fast and rich search experience. Your Algolia search interface can contain a search bar, filters, infinite scrolling, query suggestions, sorting, refinements, etc. These help your users find what they’re looking for and discover new products.

Find more info about Algolia here.

πŸ“š Documentation

Pre-requirements (5 minutes)

  1. Go to https://www.algolia.com and create an account

  2. Navigate to your Algolia Dashboard and create a new index here:

3. Now you need to populate the newly created index with data. You can import your database data directly or use a sample dataset:

4. Go to API keys page and copy your Application ID and Search-Only API key.

Please do not use the Admin API Key and keep it secret.

​

Plugin Configuration (2 minutes)

Install the Advanced Algolia Search plugin. Paste your keys directly on the plugin page:

Now add the Algolia Search element into your app. Insert your Index name. For the Data type please choose Algolia (Search Result). This field is used internally by the plugin.

You are ready to make your first search!

Searching the data

Plugin provides you a very straightforward way to search the data. Just call the Search action (for example, when user clicked a search button or search input value changed):

​

Field

Type

Description

Query

String

String to search

Attributes to retrieve

String

Comma-separated values. Example: "name, description, price". Attributes are the field names in your data structure.

Page

Number

Page to retrieve (starting from 0)

Results per page

Number

Number of records per page

Once Algolia returns the search results, you can access the Result shared state:

It provides you a set of fields:

Field

Type

Description

processingTimeMs

Number

Query processing time (ms)

page

Number

Current page index (starting from 0)

nbPages

Number

Total pages number in the final result

nbHits

Number

Total number of found results

hitsPerPage

Number

Number of results on the current page

field1 .. field20

Array of Strings

Requested data attributes (in the order defined by Attributes to retrieve field).

FieldN is an array of strings. For example:

  • field1 (id): ["123", "542", "941"]

  • field2 (name): ["iPhone", "Android", "Samsung"]

  • ...

Therefore you can iterate over arrays to display your data in tables, Repeating Groups etc.

Sending the data to Algolia

There are several ways to push your data to an Algolia index:

  • Using the Algolia dashboard by sending a JSON file.

  • Using a Plugin action "Send Data" as explained below.

  1. From your workflow call the "Send Data" action

  2. Provide the index name, your APP ID and Admin API Key

  3. Provide the object fields (name, age and country in the example above)

  4. The returned object has 2 fields: error (Yes/No) and message (text)