Plugins
Templates
Template Setup Guides

Algolia 2.0 - Simple Search

Introduction

Building a search engine for your website used to be a tedious process. You had to perfect long searches in the Bubble database and worry about the performance. But now you can search your data in real-time with Algolia without having to worry about any of these issues.

Algolia Setup

1. Register for an account

Go to http://algolia.com and register for an account. You have 14 days of free trial to evaluate Algolia.

Select the data center with the least latency or the closest to your location.

2. Creating your first index

If you don’t have a real set of data, you can use Algolia’s sample records (click on the use sample user profile records button). If you have a real set of data, you can import them as JSON or CSV.

3. Your Algolia index

The Algolia indices page shows you the data belonging to your index and allows you to search it in real-time. For example, you can type Lina in the search input to retrieve all the profiles that contain the word Lina in them.

4. Configuring ranking for your index

Locate the upper tab under your index and select "Configuration" then "Ranking and Sorting" to set up the ranking factors for your search. Algolia offers many ranking factors, I’m going to briefly mention the most important factors. They do have good documentation and decent support if you need to customize your index furthermore.

We suggest you keep the default values for the following fields unless you face any issue with them later on:

  • Min chars to accept 1 typo

  • Min chars to accept 2 typos

  • Allow typos on numeric tokens

  • Ignore plural

  • Disable typo-tolerance on

  • Query words interpretation

  • Ranking

Attributes to index: Lets you select the attributes you want algolia to search. For instance, you want to search the email address but never search the home address field.

Custom Ranking: It allows you to specify the popularity of your data. Say the number of followers defines how important a person is, making it more relevant when sorting search results.

Optional words: Whenever you’re searching text or sentences rather than keywords, optional words are the most important configuration. It will instruct the search engine to skip the defined optional words (also known as Stop words). Optional words are a list of commonly used words (such as “a”, “the”, etc.) that are deemed irrelevant because they occur frequently and matching those words would not make be helpful when aiming to return relevant data. Here’s a list of stop words for the English language, you can also find the list for other languages.

Synonyms: Synonyms list would be helpful to define equivalent keywords. For instance: “any”, “whatever” and “whatsoever” will be treated as if they were the same word.

Remove words if no results: In most cases, this setting is very useful as Algolia tries to re-run your search during the same API call by removing 1 word at a time. Use lastWords if you want to remove words from the end of the search query, or firstWords if you want to remove words from the beginning of the search query.

5. Configuring display for your index

We suggest you keep the default values for the following fields unless you face any issue with them later on:

  • Max Values Per Facet

  • Unretrievable attributes

  • Attributes to snippet

  • Replace synonyms in the highlight

  • Highlight prefix tag

  • Highlight postfix tag

  • Attribute for distinct

  • Distinct

Attributes for faceting: Faceting is a very useful feature offered by Algolia. It lets you categorize your data according to a certain field. For instance, you can categorize the data by company, language or country.

Hits per page: Like many other configuration options, the “hits per page” can be overridden at query-time. Meaning that when you send the request to Algolia using their API, you can provide a new value that will override the one saved in your index settings. This setting is used to specify the number of results to show per page.

Attributes to retrieve: Defines the attributes you want to retrieve, by default it returns all attributes.

In order to have the filtering option from „Algolia Search” element working it is needed to set up filtering and faceting in Algolia Dashboard.

Steps for setting up filtering and faceting:

  1. Open in your Algolia dashboard, find tab "configuration". (image)

  2. Select “Searchable attributes” and add there all the needed attributes by which you want to filter. (image)

  3. Select “Facets” and add there all the needed attributes by which you want to filter. (image)

Don’t forget to save after all needed attributes are added.

1. Tab Configuration
2. Searchable attributes
3. Facets

Bubble Setup and Usage

Visual Elements

1. Searching your data in real-time

At this point, we provide a really simple way to search for Algolia data from the Bubble app using the plugin.

Algolia Simple Search - element. Simply place the new element on page, installed element on the page should look like this.

Plugin Fields and States

Algolia Simple Search - properties & fields

The element fields itself are documented, but here we provide description for each field.

  • Index Name - is just the Algolia created index name. (text)

  • Query - searching query, is a dynamic value Ex: An input value or external API provider data. (text)

  • Type of Content - here you need to provide an app type, but the plugin itself comes with its app type, so here you need to provide the "Algolia Result" type. (Algolia Result)

  • Fields to Retrieve - important field, here you need to provide what fields you want to retrieve from Algolia objects. Let's say we have an object structure like this in the Algolia index [image here] and we want to retrieve fields "name" and "email", the input value should look like this [image here]. (text)

  • Hits Per Page - because Algolia uses pagination to return results, you need to provide how many hits per page you want to retrieve, min 1, max 1000. (number)

  • Page - specify the page to retrieve. You will need to use this setting if you wish to retrieve specific pages. (number)

  • Proximity - the precision of the proximity ranking criterion. The minimum (and best) proximity value between two matching words is 1. This is the engine default. Setting it to 2 (respectively N) would allow 1 (respectively N-1) additional word(s) to be found between two matching words without degrading the proximity ranking value.

2. Algolia Simple Search - Algolia Result state

Algolia Result state is a complex object now so you can find all the information about your query and all the fields in one place.

Each property name describes what kind of information it contains.

  • query - your requested query. (text)

  • params - your request params. (text)

  • hitsPerPage - provided hits per page. (number)

  • nbHits - total number of hits. (number)

  • nbPages - total number of pages. (number)

  • page - currently requested page. (number)

  • field 1 - list of results that overlapping the first required field. (list of text)

  • field 2 - list of results that overlapping the second required field. (list of text)

  • ... 3, 4, 5, 6 ...

  • field19 - list of results that overlapping the nineteenth required field. (list of text)

  • field20 - list of results that overlapping the twentieth required field. (list of text)

You can display results in a repeating group by iterating through the results list (list of text) and extract item by repeating group cell's index.

Demo to preview the settings