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
string
[required] Refers to an index of the Elasticsearch cluster.Note:
Multiple indexes can be connected to by specifying comma-separated index names. -
url
string
[required] URL for the Elasticsearch cluster -
credentials
string
[required] Basic Auth credentials if required for authentication purposes. It should be a string of the formatusername:password
. If you are using an appbase.io cluster, you will find credentials under theSecurity > API credentials
section of the appbase.io dashboard. -
appbaseConfig
Object
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 totrue
and appbase.io is used as a backend. Defaults tofalse
. - enableQueryRules
Boolean
Iffalse
, then appbase.io will not apply the query rules on the search requests. Defaults totrue
. - enableSearchRelevancy
Boolean
defaults totrue
. 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. TheuseCache
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 tofalse
, disable the telemetry. Defaults totrue
.
- recordAnalytics
To configure the ReactiveSearch API
The following properties can be used to configure the appbase.io ReactiveSearch API:
-
id
string
[required] unique identifier of the component, can be referenced in other components'react
prop. -
type
string
This property represents the type of the query which is defaults tosearch
, valid values aresearch
,term
,range
&geo
. You can read more here. -
dataField
string | Array<string | DataField>
index field(s) to be connected to the component’s UI view. DataSearch accepts anArray
in addition tostring
, 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 thedataField
property as an array of objects of theDataField
type to set the field weights.
TheDataField
type has the following shape:type DataField = { field: string; weight: number; };
-
value
any
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
string
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
Object
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 ofand
,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 itsid
.Array
is used for specifying multiple components by theirid
.Object
is used for nesting other key clauses.
- key
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
Number of suggestions and results to fetch per request. -
from
number
To define from which page to start the results, it is important to implement pagination. -
includeFields
Array<string>
fields to be included in search results. -
excludeFields
Array<string>
fields to be excluded in search results. -
sortBy
string
sort the results by eitherasc
ordesc
order. -
aggregationField
string
[optional] One of the most important use-cases this enables is showingDISTINCT
results (useful when you are dealing with sessions, events, and logs type data). It utilizescomposite 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 useaggregationData
usingonAggregationData
callback orsubscriber
.
<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
boolean
[optional] whether highlighting should be enabled in the returned results. -
highlightField
string or Array
[optional] 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
Object
[optional] It can be used to set the custom highlight settings. You can read theElasticsearch
docs for the highlight options at here. -
categoryField
string
[optional] Data field which has the category values mapped. -
categoryValue
string
[optional] This is the selected category value. It is used for informing the search result. -
nestedField
string
set thenested
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 ofnested
type. -
fuzziness
string | number
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 -
enableSynonyms: boolean This property can be used to control (enable/disable) the synonyms behavior for a particular query. Defaults to
true
, if set tofalse
then fields having.synonyms
suffix will not affect the query. -
searchOperators
boolean
Defaults tofalse
. If set totrue
, then you can use special characters in the search query to enable the advanced search.
Read more about it here. -
queryString
boolean
[optional] Defaults tofalse
. If set totrue
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
boolean
[optional] Defaults tofalse
, 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 totrue
, the component's input selection is cleared. -
pagination: boolean This property allows you to implement the
pagination
forterm
type of queries. Ifpagination
is set totrue
then appbase will use the composite aggregations of Elasticsearch instead of terms aggregations. -
after: Object This property can be used to implement the pagination for
aggregations
. We use the composite aggregations ofElasticsearch
to execute the aggregations' query, the response of composite aggregations includes a key namedafter_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. -
showMissing: boolean Defaults to
false
. When set totrue
then it also retrieves the aggregations for missing fields. -
missingLabel: string Defaults to
N/A
. It allows you to specify a custom label to show when showMissing is set totrue
. -
includeNullValues: boolean 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.
-
interval: number To set the histogram bar interval, applicable when aggregations value is set to
["histogram"]
. Defaults toMath.ceil((range.end - range.start) / 100) || 1
. -
aggregations: Array
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 adataField
, -
min
: to retrieve the minimum value for adataField
, -
histogram
: to retrieve the histogram aggregations for a particularinterval
-
selectAllLabel: string 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
) thenterm
query will make sure that thefield
exists in theresults
. -
distinctField
String
[optional] This prop returns only the distinct value documents for the specified field. It is equivalent to theDISTINCT
clause in SQL. It internally uses the collapse feature of Elasticsearch. You can read more about it over here. -
distinctFieldConfig
Object
[optional] This prop allows specifying additional options to thedistinctField
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 theinner_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
boolean
[optional] Defaults tofalse
. 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
boolean
[optional] Show 1 suggestion per document. If set tofalse
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 indataField
prop. Defaults totrue
.
Example if you haveshowDistinctSuggestions
is set tofalse
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
Object
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
(requestOptions: Object) => Promise<Object>
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.
For example, we will add thecredentials
property in the request usingtransformRequest
.
<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
(response: any) => Promise<any>
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
}
-
defaultQuery:
(component: SearchComponent) => Object
is a callback function that takes theSearchComponent
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
orresults
insearch
type of components. - To modify the
aggregations
interm
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. - To modify the query to render the
<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>
-
customQuery:
(component: SearchComponent) => Object
takesSearchComponent
instance as parameter and returns the query to be applied to the dependent components byreact
prop, as defined in Elasticsearch Query DSL.For example, the following example has two components
search-component
(to render the suggestions) andresult-component
(to render the results). Theresult-component
depends on thesearch-component
to update the results based on the selected suggestion. Thesearch-component
has thecustomQuery
prop defined that will not affect the query for suggestions(that is howcustomQuery
is different fromdefaultQuery
) but it'll affect the query forresult-component
because of thereact
dependency onsearch-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 tofalse
. -
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
- data:
-
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 scoped-slot
to render your custom UI. The following properties are available in the slot.
Getters
- loading:
boolean
indicates that the query is still in progress. - error:
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
() => Array<Object>
This method can be used to get the parsed suggestions from theresults
. IfenablePopularSuggestions
property is set totrue
then the popular suggestions will get appended at the top with a top-level property named_popular_suggestion
astrue
. Thesuggestion
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
string
as defined in props - react
Object
react
as defined in props - queryFormat
string
as defined in props - dataField
string | Array<string | DataField>
as defined in props - categoryField
string
as defined in props - categoryValue
string
represents the current value of the selected category - nestedField
string
as defined in props - from
number
represents the current state of thefrom
value. This property is useful to implement pagination. - size
number
represents the current state of thesize
of results to be returned by query - sortBy
string
current state of thesortBy
value - aggregationField
string
as defined in props - includeFields
Array<string>
represents the current value ofincludeFields
property - excludeFields represents the current value of
excludeFields
property - fuzziness
string|number
represents the current value offuzziness
property - searchOperators
boolean
as defined in props - highlight
boolean
as defined in props - highlightField
string|Array<string>
as defined in props - customHighlight
Object
as defined in props - enableSynonyms
boolean
as defined in props - queryString
string
as defined in props - enablePopularSuggestions
boolean
as defined in props - showDistinctSuggestions
boolean
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
orERROR
. - appbaseConfig
Object
as defined in props - queryId
string
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
( value: any, options?: Options ) => void
can be used to set thevalue
property -
setCategoryValue
(categoryValue: string, options?: Options) => void
can be used to set thecategoryValue
property. -
setSize
( size: number, options?: Options ) => void
can be used to set thesize
property -
setFrom
( from: number, options?: Options ) => void
can be used to set thefrom
property. Useful to implement pagination. -
setAfter
(after: object, options?: Options) => void
can be used to set theafter
property, which is useful while implementing pagination when thetype
of the component isterm
. Theafter
key is a a property ofaggregationData
. -
setFuzziness
( fuzziness: string|number, options?: Options ) => void
can be used to set thefuzziness
property. -
setIncludeFields
( includeFields: Array<string>, options?: Options ) => void
can be used to set theincludeFields
property. -
setExcludeFields
( excludeFields: Array<string>, options?: Options ) => void
can be used to set theexcludeFields
property. -
setSortBy
( sortBy: string, options?: Options ) => void
can be used to set the sortBy` property. -
setReact
( react: Object, options?: Options ) => void
can be used to set thereact
property. -
setDefaultQuery
( defaultQuery: function, options?: Options ) => void
can be used to set thedefaultQuery
property. -
setCustomQuery
( customQuery: function, options?: Options ) => void
can be used to set thecustomQuery
property. -
handleMicClick
(micOptions: Object, options: Options): Promise<any>
can be used to handle the custom voice search implementation -
setDataField
( dataField: string | Array<string | DataField>, options?: Options ) => void
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
(options): Promise<any>
can be used to trigger thecustomQuery
programmatically - triggerCustomQuery
(options): Promise<any>
can be used to trigger thedefaultQuery
programmatically
Methods to subscribe to state changes
- subscribeToStateChanges
function
can be used to subscribe to the changes for the properties. Read more at here. - unsubscribeToStateChanges
function
can be used to unsubscribe to the changes for the properties. Read more at here.