# Is it possible to implement a custom Search Box (text field) for filtering by entity\_labels with autocomplete

**URL:** <https://discuss.elastic.co/t/is-it-possible-to-implement-a-custom-search-box-text-field-for-filtering-by-entity-labels-with-autocomplete/295818>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [January 31, 2022, 10:26am UTC](https://discuss.elastic.co/t/is-it-possible-to-implement-a-custom-search-box-text-field-for-filtering-by-entity-labels-with-autocomplete/295818 "2022-01-31T10:26:28Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![roman.bliztsv](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/roman.bliztsv/32/100463_2.png) [@roman.bliztsv](https://discuss.elastic.co/u/roman.bliztsv)\
**Post date:** [January 31, 2022, 10:26am UTC](https://discuss.elastic.co/t/is-it-possible-to-implement-a-custom-search-box-text-field-for-filtering-by-entity-labels-with-autocomplete/295818/1 "2022-01-31T10:26:28Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/1/6/16112764681c70c0b21f480450ec6c7b121e01df.png)

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:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/8/b/8b12a9c254a6aa5d521760277e34074a2b3ff4c6.png)

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.

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [January 31, 2022, 2:10pm UTC](https://discuss.elastic.co/t/is-it-possible-to-implement-a-custom-search-box-text-field-for-filtering-by-entity-labels-with-autocomplete/295818/2 "2022-01-31T14:10:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![roman.bliztsv](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/roman.bliztsv/32/100463_2.png) [@roman.bliztsv](https://discuss.elastic.co/u/roman.bliztsv)\
**Post date:** [January 31, 2022, 2:31pm UTC](https://discuss.elastic.co/t/is-it-possible-to-implement-a-custom-search-box-text-field-for-filtering-by-entity-labels-with-autocomplete/295818/3 "2022-01-31T14:31:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [January 31, 2022, 2:58pm UTC](https://discuss.elastic.co/t/is-it-possible-to-implement-a-custom-search-box-text-field-for-filtering-by-entity-labels-with-autocomplete/295818/4 "2022-01-31T14:58:02Z")

</div>

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](https://www.elastic.co/guide/en/app-search/current/query-suggestion.html)" or "[Search API | Elastic App Search Documentation [7.16] | Elastic](https://www.elastic.co/guide/en/app-search/current/search.html)", 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](https://github.com/elastic/app-search-javascript).

---

<div class="post-metadata">

**Author:** ![roman.bliztsv](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/roman.bliztsv/32/100463_2.png) [@roman.bliztsv](https://discuss.elastic.co/u/roman.bliztsv)\
**Post date:** [January 31, 2022, 4:06pm UTC](https://discuss.elastic.co/t/is-it-possible-to-implement-a-custom-search-box-text-field-for-filtering-by-entity-labels-with-autocomplete/295818/5 "2022-01-31T16:06:43Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [February 2, 2022, 5:50pm UTC](https://discuss.elastic.co/t/is-it-possible-to-implement-a-custom-search-box-text-field-for-filtering-by-entity-labels-with-autocomplete/295818/6 "2022-02-02T17:50:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![roman.bliztsv](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/roman.bliztsv/32/100463_2.png) [@roman.bliztsv](https://discuss.elastic.co/u/roman.bliztsv)\
**Post date:** [February 3, 2022, 10:54am UTC](https://discuss.elastic.co/t/is-it-possible-to-implement-a-custom-search-box-text-field-for-filtering-by-entity-labels-with-autocomplete/295818/7 "2022-02-03T10:54:22Z")

</div>

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.

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [February 3, 2022, 2:20pm UTC](https://discuss.elastic.co/t/is-it-possible-to-implement-a-custom-search-box-text-field-for-filtering-by-entity-labels-with-autocomplete/295818/8 "2022-02-03T14:20:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [March 3, 2022, 2:21pm UTC](https://discuss.elastic.co/t/is-it-possible-to-implement-a-custom-search-box-text-field-for-filtering-by-entity-labels-with-autocomplete/295818/9 "2022-03-03T14:21:28Z")

</div>

Closed on March 3, 2022, 2:21pm UTC

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