How does it work?

SearchComponent represents a search component that component can be used to bind to different kinds of search UI widgets. It uses the SearchComponent class from SearchBase to bind any UI component to be able to query appbase.io declaratively. Some examples of components you can bind this with:

• a category filter component,
• a search bar component,
• a price range component,
• a location filter component,
• a component to render the search results.

Props

Configure appbase.io environment

The below props are only needed if you're not using the SearchComponent component under SearchBase provider. These props can also be used to override the global environment defined in the SearchBase component.

index

Refers to an index of the Elasticsearch cluster.

Note: Multiple indexes can be connected to by specifying comma-separated index names.

url

URL for the Elasticsearch cluster

credentials

Basic Auth credentials if required for authentication purposes. It should be a string of the format username:password. If you are using an appbase.io cluster, you will find credentials under the Security > API credentials section of the appbase.io dashboard.

appbaseConfig

allows you to customize the analytics experience when appbase.io is used as a backend. It accepts an object which has the following properties:

• recordAnalytics Boolean allows recording search analytics (and click analytics) when set to true and appbase.io is used as a backend. Defaults to false.
• enableQueryRules Boolean If false, then appbase.io will not apply the query rules on the search requests. Defaults to true.
• enableSearchRelevancy Boolean defaults to true. It allows you to configure whether to apply the search relevancy or not.
• userId string It allows you to define the user id to be used to record the appbase.io analytics. Defaults to the client's IP address.
• useCache Boolean This property when set allows you to cache the current search query. The useCache property takes precedence irrespective of whether caching is enabled or disabled via the dashboard.
• customEvents Object It allows you to set the custom events which can be used to build your own analytics on top of appbase.io analytics. Further, these events can be used to filter the analytics stats from the appbase.io dashboard.
• enableTelemetry Boolean When set to false, disable the telemetry. Defaults to true.

To configure the ReactiveSearch API

The following properties can be used to configure the appbase.io ReactiveSearch API:

id

unique identifier of the component, can be referenced in other components' react prop.

type

This property represents the type of the query which is defaults to search, valid values are search, term, range & geo. You can read more here.

dataField

index field(s) to be connected to the component’s UI view. DataSearch accepts an Array in addition to string, which is useful for searching across multiple fields with or without field weights.
Field weights allow weighted search for the index fields. A higher number implies a higher relevance weight for the corresponding field in the search results.
You can define the dataField property as an array of objects of the DataField type to set the field weights.
The DataField type has the following shape:

type DataField = {
    field: string;
    weight: number;
};

value

Represents the value for a particular query type. Depending on the query type, the value format would differ. You can refer to the different value formats over here.

queryFormat

Sets the query format, can be or or and. Defaults to or.

• or returns all the results matching any of the search query text's parameters. For example, searching for "bat man" with or will return all the results matching either "bat" or "man".
• On the other hand with and, only results matching both "bat" and "man" will be returned. It returns the results matching all of the search query text's parameters.

react

react prop is useful for components whose data view should reactively update when on or more dependent components change their states, e.g. a component to display the results can depend on the search component to filter the results.

• key string one of and, or, not defines the combining clause.
  • and clause implies that the results will be filtered by matches from all of the associated component states.
  • or clause implies that the results will be filtered by matches from at least one of the associated component states.
  • not clause implies that the results will be filtered by an inverse match of the associated component states.
• value string or Array or Object
  • string is used for specifying a single component by its id.
  • Array is used for specifying multiple components by their id.
  • Object is used for nesting other key clauses.

An example of a react clause where all three clauses are used and values are Object, Array and string.

<template>
    <search-component
        id="result-component"
        :dataField="['original_title', 'original_title.search']"
        :react="{
            and: {
                or: ['CityComp', 'TopicComp'],
                not: 'BlacklistComp',
            },
        }"
    />
</template>

Here, we are specifying that the results should update whenever one of the blacklist items is not present and simultaneously any one of the city or topics matches.

size

Number of suggestions and results to fetch per request.

from

To define from which page to start the results, it is important to implement pagination.

includeFields

fields to be included in search results.

excludeFields

fields to be excluded in search results.

sortBy

sort the results by either asc or desc order.

aggregationField

One of the most important use-cases this enables is showing DISTINCT results (useful when you are dealing with sessions, events, and logs type data). It utilizes composite aggregations which are newly introduced in ES v6 and offer vast performance benefits over a traditional terms aggregation. You can read more about it over here. You can use aggregationData using onAggregationData callback or subscriber.

<template>
    <search-component
        id="result-component"
        :dataField="['original_title', 'original_title.search']"
        aggregationField="original_title.keyword"
        @aggregationData="handleAggregationData"
    />
</template>
<script>
export default App {
    name: 'App',
    methods: {
        handleAggregationData(prev, next) {
            console.log("aggregations", prev, next)
        }
    }
}
</script>

aggregationSize

To set the number of buckets to be returned by aggregations.

Note: This is a new feature and only available for appbase versions >= 7.41.0.

highlight

whether highlighting should be enabled in the returned results.

highlightField

when highlighting is enabled, this prop allows specifying the fields which should be returned with the matching highlights. When not specified, it defaults to applying highlights on the field(s) specified in the dataField prop.

customHighlight

It can be used to set the custom highlight settings. You can read the Elasticsearch docs for the highlight options at here.

categoryField

Data field which has the category values mapped.

categoryValue

This is the selected category value. It is used for informing the search result.

nestedField

set the nested field path that allows an array of objects to be indexed in a way that can be queried independently of each other. Applicable only when dataField's mapping is of nested type.

fuzziness

Set a maximum edit distance on the search parameters, which can be 0, 1, 2, or "AUTO". This is useful for showing the correct results for an incorrect search parameter by taking the fuzziness into account. For example, with a substitution of one character, the fox can become a box. Read more about it in the elastic search docs

This property can be used to control (enable/disable) the synonyms behavior for a particular query. Defaults to true, if set to false then fields having .synonyms suffix will not affect the query.

searchOperators

Defaults to false. If set to true, then you can use special characters in the search query to enable the advanced search.
Read more about it here.

queryString

Defaults to false. If set to true then it allows you to create a complex search that includes wildcard characters, searches across multiple fields, and more. Read more about it here.

clearOnQueryChange

Defaults to false, i.e. the component's input selection isn't cleared when the query of its dependent component changes (which is set via react prop). When set to true, the component's input selection is cleared.

This property allows you to implement the pagination for term type of queries. If pagination is set to true then appbase will use the composite aggregations of Elasticsearch instead of terms aggregations.

This property can be used to implement the pagination for aggregations. We use the composite aggregations of Elasticsearch to execute the aggregations' query, the response of composite aggregations includes a key named after_key which can be used to fetch the next set of aggregations for the same query. You can read more about the pagination for composite aggregations at here.

You need to define the after property in the next request to retrieve the next set of aggregations.

Defaults to false. When set to true then it also retrieves the aggregations for missing fields.

Defaults to N/A. It allows you to specify a custom label to show when showMissing is set to true.

If you have sparse data or documents or items not having the value in the specified field or mapping, then this prop enables you to show that data.

To set the histogram bar interval, applicable when aggregations value is set to ["histogram"]. Defaults to Math.ceil((range.end - range.start) / 100) || 1.

It helps you to utilize the built-in aggregations for range type of queries directly, valid values are:

• max: to retrieve the maximum value for a dataField,
• min: to retrieve the minimum value for a dataField,
• histogram: to retrieve the histogram aggregations for a particular interval

This property allows you to add a new property in the list with a particular value in such a way that when selected i.e value is similar/contains to that label(selectAllLabel) then term query will make sure that the field exists in the results.

distinctField

This prop returns only the distinct value documents for the specified field. It is equivalent to the DISTINCT clause in SQL. It internally uses the collapse feature of Elasticsearch. You can read more about it over here.

distinctFieldConfig

This prop allows specifying additional options to the distinctField prop. Using the allowed DSL, one can specify how to return K distinct values (default value of K=1), sort them by a specific order, or return a second level of distinct values. distinctFieldConfig object corresponds to the inner_hits key's DSL. You can read more about it over here.

<search-component
	....
	distinctField="authors.keyword"
	:distinctFieldConfig="{
		inner_hits: {
			name: 'most_recent',
			size: 5,
			sort: [{ timestamp: 'asc' }],
		},
		max_concurrent_group_searches: 4,
	}"
/>

To customize the AutoSuggestions

enablePopularSuggestions

Defaults to false. When enabled, it can be useful to curate search suggestions based on actual search queries that your users are making. Read more about it over here.

showDistinctSuggestions

Show 1 suggestion per document. If set to false multiple suggestions may show up for the same document as the searched value might appear in multiple fields of the same document, this is true only if you have configured multiple fields in dataField prop. Defaults to true.

Example if you have showDistinctSuggestions is set to false and have the following configurations

// Your document:
{
    "name": "Warn",
    "address": "Washington"
}
// SearchComponent:
dataField=['name', 'address']
// Search Query:
"wa"

Then there will be 2 suggestions from the same document as we have the search term present in both the fields specified in dataField.

Warn
Washington

To customize the query execution

headers

set custom headers to be sent with each server request as key/value pairs. For example:

<search-component
    id="search-component"
    :dataField="['original_title', 'original_title.search']"
    :headers="{
		secret: 'searchbase-is-awesome',
	}"
/>

transformRequest

Enables transformation of network request before execution. This function will give you the request object as the param and expect an updated request in return, for execution.<br

For example, we will add the credentials property in the request using transformRequest.

<template>
    <search-component
        id="search-component"
        :dataField="['original_title', 'original_title.search']"
        :transformRequest="transformRequest"
    />
</template>
<script>
export default {
    name: "App",
    methods: {
        transformRequest(elasticsearchResponse) {
            return Promise.resolve({
                ...request,
                credentials: include,
            })
        }
    }
}
</script>

transformResponse

Enables transformation of search network response before rendering them. It is an asynchronous function which will accept an Elasticsearch response object as param and is expected to return an updated response as the return value.
For example:

<template>
    <search-component
        id="search-component"
        :dataField="['original_title', 'original_title.search']"
        :transformResponse="transformResponse"
    />
</template>
<script>
    export default {
        name: "App",
        methods: {
            async transformResponse(elasticsearchResponse) {
                const ids = elasticsearchResponse.hits.hits.map(item => item._id);
                const extraInformation = await getExtraInformation(ids);
                const hits = elasticsearchResponse.hits.hits.map(item => {
                    const extraInformationItem = extraInformation.find(
                        otherItem => otherItem._id === item._id,
                    );
                    return {
                        ...item,
                        ...extraInformationItem,
                    };
                });

                return {
                    ...elasticsearchResponse,
                    hits: {
                        ...elasticsearchResponse.hits,
                        hits,
                    },
                };
            }
        }
    }
</script>

Note

transformResponse function is expected to return data in the following structure.

{
    // Elasticsearch hits response
    hits: {
        hits: [...],
        total: 100
    },
    // Elasticsearch aggregations response
    aggregations: {

    },
    took: 1
}

is a callback function that takes the SearchComponent instance as parameter and returns the data query to be applied to the source component, as defined in Elasticsearch Query DSL, which doesn't get leaked to other components. In simple words, defaultQuery is used with data-driven components to impact their own data. It is meant to modify the default query which is used by a component to render the UI.

Some of the valid use-cases are:

• To modify the query to render the suggestions or results in search type of components.
• To modify the aggregations in term type of components.

For example, in a term type of component showing a list of cities, you may only want to render cities belonging to India.

<template>
    <search-component
        id="city-component"
        type="term"
        :dataField="['city']"
        :defaultQuery="defaultQuery"
    />
</template>
<script>
    export default App {
        name: 'App',
        methods: {
            defaultQuery() {
                return {
                    query: {
                        terms: {
                            country: ['India'],
                        },
                    },
                }
            }
        }
    }
</script>

takes SearchComponent instance as parameter and returns the query to be applied to the dependent components by react prop, as defined in Elasticsearch Query DSL.

For example, the following example has two components search-component(to render the suggestions) and result-component(to render the results). The result-component depends on the search-component to update the results based on the selected suggestion. The search-component has the customQuery prop defined that will not affect the query for suggestions(that is how customQuery is different from defaultQuery) but it'll affect the query for result-component because of the react dependency on search-component.

<template>
    <search-base
        index="gitxplore-app"
        url="https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io"
        credentials="a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61"
    >
        <search-component
            id="search-component"
            :dataField="['original_title', 'original_title.search']"
            :customQuery="customQuery"
        />
        <search-component
            id="result-component"
            dataField="original_title"
            :react="{
                and: ['search-component']
            }"
        />
    </search-base>
</template>
<script>
    export default App {
        name: 'App',
        methods: {
            customQuery() {
                return {
                    timeout: '1s',
                    query: {
                        match_phrase_prefix: {
                            fieldName: {
                                query: 'hello world',
                                max_expansions: 10,
                            },
                        },
                    },
                }
            }
        }
    }
</script>

Miscellaneous

• beforeValueChange Function

is a callback function which accepts component's future value as a parameter and returns a promise. It is called every-time before a component's value changes. The promise, if and when resolved, triggers the execution of the component's query and if rejected, kills the query execution. This method can act as a gatekeeper for query execution, since it only executes the query after the provided promise has been resolved. For example:

<template>
    <search-component
        id="search-component"
        :dataField="['original_title', 'original_title.search']"
        :beforeValueChange="beforeValueChange"
    />
</template>
<script>
    export default App {
        name: 'App',
        methods: {
            beforeValueChange(value) {
                // called before the value is set
                // returns a promise
                return new Promise((resolve, reject) => {
                    // update state or component props
                    resolve();
                    // or reject()
                });
            }
        }
    }
</script>

• URLParams Boolean

enable creating a URL query string param based on the search query value. This is useful for sharing URLs with the component state. Defaults to false.

• subscribeTo Array<string>

lets you subscribe to various SearchComponent properties to render UI (or to create a side-effect) based on changes to the properties.
These are the properties that can be subscribed to:

• results
• aggregationData
• requestStatus
• error
• value
• query
• micStatus
• dataField
• size
• from
• fuzziness
• includeFields
• excludeFields
• sortBy
• react
• defaultQuery
• customQuery

Events

• valueChange is an event which accepts component's current value as a parameter. It is called every-time the component's value changes. This prop is handy in cases where you want to generate a side-effect on value selection. For example: You want to show a pop-up modal with the valid discount coupon code when a user searches for a product in a SearchBox.

• error gets triggered in case of an error while fetching results

• results can be used to listen for the results changes

• queryChange is an event which accepts component's prevQuery and nextQuery as parameters. It is called every time the component's query changes. This prop is handy in cases where you want to generate a side-effect whenever the component's query would change.

• aggregationData can be used to listen for the aggregationData property changes

  • data: Array<Object> contains the parsed aggregations
  • raw: Object Response returned by ES composite aggs query in the raw form.
  • rawData: Object An object of raw response as-is from elasticsearch query.
  • afterKey: Object If the number of composite buckets is too high (or unknown) to be returned in a single response use the afterKey parameter to retrieve the next

• requestStatusChange can be used to listen for the request status changes

• micStatusChange can be used to listen for the mic status changes

Render UI

You can use the default slot to render your custom UI. The following properties are available in the slot.

Getters

boolean

indicates that the query is still in progress. Object

An object containing the error info.

results Results

It is an object which contains the following details of suggestions query response.

• data: Array<Object> contains the (promoted data + parsed hits)
• raw: Object Response returned by ES query in the raw form.
• numberOfResults: number Total number of results found
• time: number Total time taken by request (in ms)
• hidden: number Total number of hidden results found
• promoted: number Total number of promoted results found
• promotedData: Array<Object> An array of promoted results obtained from the applied query.
• customData: Object An object of custom data obtained from the ReactiveSearch API.
• rawData: Object An object of raw response as-is from elasticsearch query.

suggestions

This method can be used to get the parsed suggestions from the `results`. If `enablePopularSuggestions` property is set to `true` then the popular suggestions will get appended at the top with a top-level property named `_popular_suggestion` as `true`. The `suggestion` object will have the following shape:

{
    label: string;
    value: string;
    source: Object;
}

aggregationData Aggregations

It is an object which contains the following details of aggregations query response.

• data: Array<Object> contains the parsed aggregations
• raw: Object Response returned by ES composite aggs query in the raw form.
• rawData: Object An object of raw response as-is from elasticsearch query.
• afterKey: Object If the number of composite buckets is too high (or unknown) to be returned in a single response use the afterKey parameter to retrieve the next results. This property will only be present for composite aggregations.

value

Represents the current value of the component

query Object

The last query that has been executed by the component

micStatus MicStatusField

Returns the current status of the mic. Can be INACTIVE, ACTIVE or DENIED

micActive boolean

Returns true if mic is active

micInactive boolean

Returns true if mic is inactive

micDenied boolean

Returns true if it doesn't have access to the mic

micInstance Object

Returns the current mic instance. Can be used to set mic language and other properties of mic

id

as defined in props

react

react as defined in props

queryFormat

as defined in props

dataField

as defined in props

categoryField

as defined in props

categoryValue

represents the current value of the selected category

nestedField

as defined in props

from

represents the current state of the from value. This property is useful to implement pagination.

size

represents the current state of the size of results to be returned by query

sortBy

current state of the sortBy value

aggregationField

as defined in props

includeFields

represents the current value of includeFields property

excludeFields

represents the current value of excludeFields property

fuzziness

represents the current value of fuzziness property

searchOperators

as defined in props

highlight

as defined in props

highlightField

as defined in props

customHighlight

as defined in props

enableSynonyms

as defined in props

queryString

as defined in props

enablePopularSuggestions

as defined in props

showDistinctSuggestions

as defined in props

defaultQuery

represents the current value of defaultQuery property

customQuery

represents the current value of customQuery property

requestStatus

represents the current state of the request, can have values as INACTIVE, PENDING or ERROR.

appbaseConfig

as defined in props

queryId

to get the query id returned by appbase.io search to track the analytics

Setters

Note: All of the methods accept options as the second parameter which has the following shape:

{
    triggerDefaultQuery?: boolean, // defaults to `true`
    triggerCustomQuery?: boolean, // defaults to `false`
    stateChanges?: boolean // defaults to `true`
};

triggerDefaultQuery

true executes the query for a particular component

triggerCustomQuery

true executes the query for the dependent components (dependencies defined in the react property)

stateChanges

true invokes the subscribed functions to subscribeToStateChanges method, i.e trigger the re-render after making changes

The following methods can be used to set or update the properties in the search state:

setValue

can be used to set the value property

setCategoryValue

can be used to set the categoryValue property.

setSize

can be used to set the from property. Useful to implement pagination.

setAfter

can be used to set the after property, which is useful while implementing pagination when the type of the component is term. The after key is a a property of aggregationData.

setFuzziness

can be used to set the fuzziness property.

setIncludeFields

can be used to set the includeFields property.

setExcludeFields

can be used to set the excludeFields property.

setSortBy

can be used to set the sortBy` property.

setReact

can be used to set the react property.

setDefaultQuery

can be used to set the defaultQuery property.

setCustomQuery

can be used to set the customQuery property.

handleMicClick

can be used to handle the custom voice search implementation

setDataField

Methods to trigger queries programmatically

Note: All of the methods accept options as the second parameter which has the following shape:

{
    stateChanges?: boolean // defaults to `true`
};

stateChanges

true invokes the subscribed functions to subscribeToStateChanges method, i.e trigger the re-render after making changes

The following methods can be used to execute the component's queries programmatically.

triggerDefaultQuery

can be used to trigger the customQuery programmatically

triggerCustomQuery

can be used to trigger the defaultQuery programmatically

Methods to subscribe to state changes

subscribeToStateChanges

can be used to subscribe to the changes for the properties. Read more at here.

unsubscribeToStateChanges

can be used to unsubscribe to the changes for the properties. Read more at here.

Record Analytics

recordClick

enables recording click analytics of a search request. Please check the usage at here.

recordConversions

enables recording conversions of a search request. Please check the usage at here.