Is it possible to implement a custom Search Box (text field) for filtering by entity_labels with autocomplete

Hi @JasonStoltz & others :slight_smile:
I have implemented a lot of filters already in our search ui, so that its possible to filter by search_fields, date etc.

Here is how it looks and it works great:

However, I don't have any ideas how to implement another feature.
The idea is next - you have another kind of "text fields" near all other filters where you are able to type and have an autocomplete by entity_labels. Currently, entity_labels filter is used in facets filters so that you have those as a checkboxes:

So, the question is, is it possible to implement the autocomplete search feature to set the filter by entity_labels?
It should work exactly like SearchBox component but only for setting a filter and of course making the request to have autocomplete suggestions.

So to be clear, in your example, when you type in the "Filter entity_labels" box you would like to have an autocomplete dropdown that shows suggestions for entity_labels?

Do you have any examples you can point me to where you've seen something like this implemented?

How many entity_labels exist in your data?

Thanks for answering,

so the thing is that I am trying to investigate whether its possible or not at all, at cannot find any information about stuff like that.

Yes, you are right, I want a dropdown where you can type and have autocomplete with suggestions.

I am not sure how many entity_labels I have there, but its definitely around 1 million.

Alright, so if you have around 1 million then this definitely would require a server-side query, it would not be efficient to store these all client-side and filter them.

App Search has no concept of server-side "Facet Value Search", which makes this challenging.

To get something close to this, you'd possibly have to do something like the following:

So, if I understand you right, I will have to make a custom query suggestions with an autocomplete suggestion, and then when I choose some options, the addFilter or setFilter is called and its good to go ?

Yes. I don't know how it will work out, but it is the best advice I can offer.

Hey,
So, I have managed to implement all needed AC's, thank you for help.

Here is the code, of how the feature was implemented, if someone needs more detailed example I will also explain and attach the code.

import React, { useState } from 'react';
import { AutoComplete } from 'antd';
import * as ElasticAppSearch from "@elastic/app-search-javascript";
import debounce from 'lodash/debounce';

import { getConfig } from "../config/config-helper";

const { searchKey, endpointBase, engineName } = getConfig();

const appSearchClient = ElasticAppSearch.createClient({
  searchKey: searchKey,
  endpointBase: endpointBase,
  engineName: engineName
});

const { Option } = AutoComplete;

const querySuggestionOptions = {
  size: 10,
  types: {
    documents: {
      fields: ["entity_labels"]
    }
  }
};

const AutoCompleteInputBox = ({ onSelect }) => {
  const [result, setResult] = useState([]);

  const handleSearch = (value) => {
    appSearchClient
      .querySuggestion(value, querySuggestionOptions)
      .then(response => {
        const appropriateResult = response.results.documents.map(({ suggestion }) => suggestion);

        setResult(appropriateResult);
      })
      .catch(error => console.error(`An error occured: ${error}`));
  };

  return (
    <AutoComplete style={{ width: '100%' }} onSearch={debounce(handleSearch, 300)} onSelect={onSelect} placeholder="Search for entity labels">
      {result.map(suggestion => (
        <Option key={suggestion} value={suggestion}>
          {suggestion}
        </Option>
      ))}
    </AutoComplete>
  );
};

export default AutoCompleteInputBox;

Roman, that's amazing! I was worried I left you hanging there, but it seems like it actually worked out. Nice work! Thank you for sharing for future folks. Hopefully we can integrate something like this into Search UI.

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.