Searching with Algolia within a nested array structure

I'm currently developing a search application that utilizes Algolia for indexing purposes. The goal is to display events in the autocompletion dropdown when a user enters a search term into the text input box. Each event is associated with an event category as well.

For instance:

{
  "category": "Disney",
  "events": [
    {
      "title": "Ice Skating"
    },
    {
      "title": "Peter-Pan"
    },
    {
      "title": "Roller Skating"
    }
  ]
}

If a user searches for "skating", we want to show the parent category along with the child events "Ice Skating" and "Roller Skating", but exclude the "Peter-Pan" event.

My question is, can Algolia handle this type of nested filtering? If so, how would the filtering process work? Would it need to be managed through JavaScript, does Algolia have built-in support for it, or should we consider creating separate indexes for Event Categories and Individual Events?

Appreciate any insights!

javascriptarrayssearchvue.jsalgolia

Answer №1

Indeed, Algolia is capable of automatically excluding Peter Pan and displaying results containing Skating.

To illustrate, let's consider a sample data structure like this:

announcements: [
  {
     id: ..,
     ..
     author: {
       id: ..,
       name: 'Preston',
       ..
     }
  },
  ..
]

If you search the Announcements for Preston, it will retrieve any announcement where Preston is found in the author field. By default, Algolia scans the entire record for your query which may result in slower performance.

You have the option to specify search criteria and exclusions by accessing the Algolia dashboard or utilizing the API under your index's Ranking section.

Answer №2

To enhance the search functionality, start by including events.title in the searchable attributes. By doing this, a search for "skat" by the end-user will be able to match it with one of the titles.

Afterwards, you can analyze which parts of each search result are being matched by utilizing _highlightResult and specifically filtering based on the matchLevel:

https://i.sstatic.net/kjjCu.png

When there is a match, it will display as 'full', while 'none' indicates no match found.

This type of filtering can easily be implemented in JavaScript within the template used to showcase the search results.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Jquery Ajax for on-focusout and on-submit actions can be tricky, requiring two clicks for the desired outcome

Greetings, I am currently working on a jQuery and Ajax validation form. In this form, if you enter incorrect values like [email protected] for email and 1111111 for password, it will trigger an Ajax validation notice as expected. However, the issue a ...

javascriptjqueryhtmlajax

Tips for setting up unique colored speech bubbles based on user profiles in an Instant Messaging platform

If you were creating a real-time messaging platform that supports group chats with 3 or more users, and each message bubble needed to have a unique color, how would you approach this? Is there a method to dynamically change the CSS class of a speech bubb ...

javascriptcssnode.jsuser-interfacefrontend

Enhancing JavaScript code to display an HTML table instead of a PNG image loading

I'm having trouble updating my code to load HTML tables instead of images. Can you assist me with this task? I have some queries regarding the possibility of combining an image name, stored as a PNG file, with my new source which will consist of simpl ...

javascripthtml

What is the best way to transfer information between two components when working with an edit form?

Presently, I am utilizing a modal material dialog window that prompts the user to input a number and then press search. Upon searching, it retrieves data from an API call and receives a response object. My goal is to utilize this response object to populat ...

javascriptangulartypescript

Changes are being made to a PHP object within a duplicated array

In my code, I am working with a multidimensional array where some of the elements are objects. My goal is to create two arrays: one that has had all string values and object properties passed through a specific function called esc(), and another which rema ...

phparrays

The palindrome checking function is malfunctioning and needs to be fixed

I have attempted to create a function to determine if a number is a palindrome, but it seems to be malfunctioning. The concept is simple - splitting the number into two halves, comparing them, and reversing one half to check for symmetry. function palin ...

javascriptarraysfunction

Tips for integrating Material UI with useRef

There seems to be an issue with the code, but I haven't been able to pinpoint exactly what it is. My question is: How do you properly use useRef with Material UI? I am attempting to create a login page. The code was functioning fine with the original ...

javascriptreactjsmaterial-ui

Angular firing a function in the then clause before the initial function is executed

I have a situation where I need to make multiple service calls simultaneously, but there is one call that must be completed before the others are triggered. I have set it up so that the other calls should only happen after the .then(function() {}) block of ...

javascriptangularjstypescriptangular-promise

What is the best way to combine PHP and HTML within a JavaScript script?

I'm facing a challenge with integrating dynamically added elements and a populated drop down on my form. Is there a way to combine the two seamlessly? Below is the code snippet I'm using for dynamically adding and removing elements: $(docu ...

javascriptphphtml

Displaying the quantity of directories within a specific location

Can anyone help me troubleshoot my code? I'm trying to have a message displayed in the console when the bot is activated, showing the number of servers it is currently in. const serversFolders = readdirSync(dirServers) const serversCount = parseInt(s ...

javascriptdiscord.js

Are the import and export keywords native to webpack or are they specific to JavaScript syntax?

I am pondering whether the import & export aspects are part of the language itself or simply keywords that webpack adds to the language. Thank you. ...

javascriptwebpackimportexport

What exactly happened to my buttons when I transition to the mobile display?

Due to time constraints, I decided to save some time by utilizing a CSS template called Horizons created by Templated. This particular CSS template uses Javascript to adjust the layout for mobile devices, causing buttons to switch from inline to block for ...

javascriptphphtmlcss

How can we initiate the AJAX request right away while also making sure the page is fully loaded before adding

One trick I've discovered is that by submitting an AJAX request in the <head> section of my webpage, I can avoid a minor flicker on page load when loading content via AJAX. Of course, this method still needs some refining to handle longer AJAX r ...

javascriptjqueryajaxhtml

Why is my CSS export missing in the Shareable Vite/Vue component error message?

I have been closely following a tutorial on building a shareable Vue component using Vite and testing it by linking it into another project. The process involves building with Vite through 'npm run build' and then linking the component. However, ...

vue.jsnpmcomponentsvite

Tips on triggering a function defined within an AngularJS scope using an event handler

I am in the process of creating a custom directive that generates a menu by processing an array of menu entries defined as objects. The menu works perfectly fine and appears as a pop-over above the page content. Everything seems to be in order so far. Ho ...

javascriptjqueryangularjs

The loop is returning a string element instead of the expected type from the array

I am facing an issue with looping through a TypeScript array. The following methods are being used: getNotification(evt: string, rowIndex: number) { console.log("Production order: law has changed to " + evt + " " + rowIndex); var select = document ...

javascriptarraystypescript

Using Node.js to include multiple parameters in a route by using regular expressions

Trying to create my first route with multiple params filtered using regexs: router.get('/circle/:radius([0-9]{1,3})/Xposition/:x(\-?[0-9]{1,3}(\.[0-9]{1,9})?)/Yposition/:y(\-?[0-9]{1,3})', function(req, res, next) { console.log(&a ...

javascriptnode.jsexpress

At what point does angular2 @output get resolved?

Click on this link Here is the HTML code snippet: <chart [options]="options" (load)="saveGraphInstance($event.context)"></chart> <div (click)="switchGraph()">switch</div> <div (click)="showLoadingForce()">show loadin ...

javascriptangulartypescripthighchartsangular5

Combining Characters and Integers in a Single Array

I am looking to create an array that contains both characters and integers. My goal is to have numbers 1 through 9 in the array, allowing the user to choose a number to replace with the letter X. Is there a way to achieve this given that the array is def ...

c++carrayscharint

How is it possible to encounter a missing semicolon CssSyntaxError during a Gatsby build?

Currently, I am in the process of developing a Gatsby page with Material UI. The design of the page is almost finalized; however, upon completing the project, an unexpected build error occurs when running npm run build. WebpackError: Pathname: /invitation/ ...

javascriptreactjsmaterial-uigatsby