Space-separated Tag Search

Hi! I have (what I believe might be) a unique search use case and I’m wondering if Algolia can help us:

Users on our page typical find images by tag search, a space-separated list, such as:

dog high.contrast john.doe.photography

Note that if a single tag contains multiple words, users know to concatenate those words with a period. All multi-word tags are period-separated.

After the user has typed out their desired tags and submitted the form, the site will return images that include those tags.

Our goal is to assist users with typing tags into the search box. Hypothetically, we will have an index of tags like {"name": "high.contrast", "uses": 75173}.

For us, ideally, Algolia would return results based on the current tag the user is typing. For example, given an input like:

dog water hi|

(where | indicates the cursor), the results returned might be

high.contrast
hiking
hippy

Note that the returned results have nothing to do with the other space-separated words, “dog” or “water”. All the nice typo correction that Algolia offers should be included in the results too, so maybe in this instance, “harp” could be also returned.

A possible solution is to use javascript inspection on the input field to find the cursor position on keyup events to extract the current word and use that to query our tag index.

But I am wondering if Algolia has a more turnkey solution for this.

Thanks!

Hi @tim1,

Welcome to the Algolia Community!

The solution you proposed should work.

You might also take a look at this documentation about removing words to improve results. I’m not sure it will do exactly what you need, but it might give you some ideas on how best to solve this use case.

Let us know how it goes!

Thanks @cindy.cullen !

I was able to achieve our goals with the solution I proposed above using Algolia’s autocomplete.js.

I will explain what I did in case it helps anyone else with a similar problem.

I had to heavily customize (and perhaps break the intended use of) autocomplete.js to get this to work because:

  • By default, Autocomplete.js expects to be running queries on the entire input text. I had to find the currently-typed word instead.
  • By default, Autocomplete.js will put the cursor at the end of the input text each time you use an autocompleted suggestion. This is fine if you’re always typing at the end of the input, but is a bad experience if you’re adding or updating a word in the middle/beginning. Therefore, there was also some work done to make sure that the cursor ends up in the right spot in these cases.

Here is a demo and code: https://codepen.io/timtimtimtimtim/pen/WNNoryG

(Note that this demo is not hooked up to an Algolia index, but it should be easy to drop one in: I’m really just trying to demonstrate the word-by-word autocompletion.)

Hi @tim1,

I’m glad you got it working! And thanks for adding your solution here for others!