Problem implementing EuiSearchBar, cannot create queries with multiple boolean operators

I am trying to create a Kibana plugin, where I need do search on entire page, similar to that of search in Discover app. But query formed using the EuiSearchBar from elastic eui components

I have the following setup implemented.

    const initialQuery = EuiSearchBar.Query.MATCH_ALL;
    const [query, setQuery] = useState(initialQuery);
    const [error, setError] = useState(null);
    const schema = {
            strict: true,
            fields: {
                "_id": {
                    type: 'string'
                },
                "@timestamp": {
                    type: 'string'
                },
                "src.user": {
                    type: 'string'
                },
                "event.name": {
                    type: 'string'
                },
                "event.count": { 
                    type: 'string'
                },
            },
        };
    const onChange = ({ query, error }) => {
        if (error) {
            setError(error);
        } else {
            setError(null);
            setQuery(query);
        }
    };
   <EuiSearchBar className="fl ft p10 mt10 ml10"
    defaultQuery={initialQuery}
    box={{
            placeholder: 'e.g: type the Group Name',
            incremental: true,
            schema,
        }}
    onChange={onChange}
    />

when I write the query in search bar like this

I get query something like this.

{
  "bool": {
    "must": [
      {
        "simple_query_string": {
          "query": "and"
        }
      },
      {
        "match": {
          "_id": {
            "query": "w91gbnQBNaptJ3V4XcXG",
            "operator": "and"
          }
        }
      },
      {
        "range": {
          "event.count": {
            "gt": "400"
          }
        }
      }
    ]
  }
}

but I want it to be :

{
  "bool": {
    "must": [
      {
        "match": {
          "_id": {
            "query": "w91gbnQBNaptJ3V4XcXG",
            "operator": "and" // "and", "or" or "not" depending on the operator used in the query as it is there in the discovery
          }
        }
      },
      {
        "range": {
          "event.count": {
            "gt": "400"
          }
        }
      }
    ]
  }
}

EuiSearchBar has its own grammar which builds Elasticsearch queries, and in that grammar and has no meaning, it's just text, because all phrases are combined with and by default.

Thanks for the reply,

Is there way to customize the grammar? so that EuiSearchBar can understand other boolean operators.

EuiSearchBar already supports AND and OR, but AND is implicit. The documentation is here https://elastic.github.io/eui/#/forms/search-bar

Can you help us in how to show suggestions in search bar. It would be help full for user to understand the syntax of search query.

The EuiSearchBar does not offer a suggestions feature. If you are trying to recreate the Kibana search bar, then I think you need to use Kibana components to do so.

All the documentation for EuiSearchBar is here: https://elastic.github.io/eui/#/forms/search-bar

Hi Wylie,

Could please let us know from where can we get all list of Kibana components with documentation.

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