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

[roman.bliztsv (Roman Blyzstiv)]

Hi @JasonStoltz & others
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.

[JasonStoltz (Jason Stoltzfus)]

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?

[roman.bliztsv (Roman Blyzstiv)]

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.

[JasonStoltz (Jason Stoltzfus)]

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:

• Index "entity_labels" into a separate Engine
• Create a new component for this. You'd need to query entity_labels in App Search directly with "Query suggestion API | Elastic App Search Documentation [7.16] | Elastic" or "Search API | Elastic App Search Documentation [7.16] | Elastic", and show results in this component.
• In that case, the filter options you are showing come from your query and NOT from facets. So you wouldn't be able to show facet counts. Clicking on a result would apply a filter using addFilter or setFilter.
• App Search has no mechanism for doing server-side facet values searches like that, so you'd be querying App Search directly through something like the fetch API, or GitHub - elastic/app-search-javascript: Elastic App Search Official JavaScript Client.

[roman.bliztsv (Roman Blyzstiv)]

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 ?

[JasonStoltz (Jason Stoltzfus)]

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

[roman.bliztsv (Roman Blyzstiv)]

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;

[JasonStoltz (Jason Stoltzfus)]

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.