![\"Instant-Meilisearch\"](\"https://raw.githubusercontent.com/meilisearch/integration-guides/main/assets/logos/logo.svg\"){kind=logo}
\n\n \n
\n ![\"npm](\"https://img.shields.io/npm/v/@meilisearch/instant-meilisearch.svg\")
\n ![\"Tests\"](\"https://github.com/meilisearch/meilisearch-js-plugins/workflows/Tests/badge.svg?branch=main\"){kind=icon}
\n ![\"License\"](\"https://img.shields.io/badge/license-MIT-informational\"){kind=icon}
![](\"https://img.shields.io/badge/github-discussions-red\"){kind=icon}
β‘ How to integrate a front-end search bar in your website using Meilisearch
\n\n**Meilisearch** is an open-source search engine. [Discover what Meilisearch is!](https://github.com/meilisearch/meilisearch)\n\nThis library is the search client that you should use to make [Meilisearch](https://github.com/meilisearch/meilisearch) work with [InstantSearch](https://github.com/algolia/instantsearch.js). InstantSearch, an open-source project developed by Algolia, is the tool that renders all the components needed to start searching in your front-end application.\n\nInstead of reinventing the wheel, we have opted to reuse the InstantSearch library for our own front-end tooling. We will contribute upstream any improvements that may result from our adoption of InstantSearch.\n\nNB: If you don't have any Meilisearch instance running and containing your data, you should take a look at this [getting started page](https://www.meilisearch.com/docs/learn/getting_started/installation).\n\n## Table of Contents \n\n- [π Documentation](#-documentation)\n- [β‘ Supercharge your Meilisearch experience](#-supercharge-your-meilisearch-experience)\n- [π§ Installation](#-installation)\n- [π¬ Usage](#-usage)\n - [Basic](#basic)\n - [Parameters](#parameters)\n- [π Customization](#-customization)\n - [Placeholder Search](#placeholder-search)\n - [Finite Pagination](#finite-pagination)\n - [Primary key](#primary-key)\n - [Keep zero facets](#keep-zero-facets)\n - [Request Config](#request-config)\n - [Custom HTTP client](#custom-http-client)\n - [Meilisearch Analytics](#meilisearch-analytics)\n - [Meilisearch search parameters](#meilisearch-search-parameters)\n - [Modify Meilisearch search parameters](#modify-meilisearch-search-parameters)\n- [πͺ‘ Example with InstantSearch](#-example-with-instantsearch)\n- [More Documentation](#more-documentation)\n- [π€ Compatibility with Meilisearch and InstantSearch](#-compatibility-with-meilisearch-and-instantsearch)\n- [π API resources](#-api-resources)\n - [Table Of Widgets](#table-of-widgets)\n - [β InstantSearch](#-instantsearch)\n - [β Index](#-index)\n - [β SearchBox](#-searchbox)\n - [β Configure](#-configure)\n - [β ConfigureRelatedItems](#-configurerelateditems)\n - [Panel](#panel)\n - [β Autocomplete](#-autocomplete)\n - [β Voice Search](#-voice-search)\n - [β Insight](#-insight)\n - [β Middleware](#-middleware)\n - [β renderState](#-renderstate)\n - [β Hits](#-hits)\n - [β InfiniteHits](#-infinitehits)\n - [β Highlight](#-highlight)\n - [β Snippet](#-snippet)\n - [β Geo Search](#-geo-search)\n - [Requirements](#requirements)\n - [Usage](#usage)\n - [β Answers](#-answers)\n - [β RefinementList](#-refinementlist)\n - [β HierarchicalMenu](#-hierarchicalmenu)\n - [Hierarchical Menu Usage](#hierarchical-menu-usage)\n - [β RangeSlider](#-rangeslider)\n - [β Menu](#-menu)\n - [β currentRefinements](#-currentrefinements)\n - [β RangeInput](#-rangeinput)\n - [β MenuSelect](#-menuselect)\n - [β ToggleRefinement](#-togglerefinement)\n - [β NumericMenu](#-numericmenu)\n - [β RatingMenu](#-ratingmenu)\n - [β ClearRefinements](#-clearrefinements)\n - [β Pagination](#-pagination)\n - [β HitsPerPage](#-hitsperpage)\n - [β Breadcrumb](#-breadcrumb)\n - [β Stats](#-stats)\n - [β Analytics](#-analytics)\n - [β QueryRuleCustomData](#-queryrulecustomdata)\n - [β QueryRuleContext](#-queryrulecontext)\n - [β SortBy](#-sortby)\n - [Sort formula](#sort-formula)\n - [Relevancy](#relevancy)\n - [Example](#example)\n - [β RelevantSort](#-relevantsort)\n - [β Routing](#-routing)\n- [βοΈ Development Workflow and Contributing](#οΈ-development-workflow-and-contributing)\n\n## π Documentation\n\nFor general information on how to use Meilisearchβsuch as our API reference, tutorials, guides, and in-depth articlesβrefer to our [main documentation website](https://www.meilisearch.com/docs/).\n\n## β‘ Supercharge your Meilisearch experience\n\nSay goodbye to server deployment and manual updates with [Meilisearch Cloud](https://www.meilisearch.com/pricing?utm_campaign=oss&utm_source=integration&utm_medium=meilisearch-js-plugins). No credit card required.\n\n## π§ Installation\n\nUse `npm` or `pnpm` to install `instant-meilisearch`:\n\n```bash\nnpm install @meilisearch/instant-meilisearch\n```\n\n```bash\npnpm add @meilisearch/instant-meilisearch\n```\n\n`instant-meilisearch` is a client for `instantsearch.js`. It does not create any UI component by itself.{{#helpers.snippet}}{ \"attribute\": \"description\" }{{/helpers.snippet}}
\n `,\n },\n})\n```\n\n### β Geo Search\n\n[Geo search references](https://www.algolia.com/doc/api-reference/widgets/geo-search/js/)\n\nThe `geoSearch` widget displays search results on a Google Map. It lets you search for results based on their position and provides some common usage patterns such as βsearch on map interactionsβ.\n\n- β container: The CSS Selector or HTMLElement to insert the Google maps into. _required_\n- β googleReference: The reference to the global window.google object. See the [Google Maps](https://developers.google.com/maps/documentation/javascript/overview) documentation for more information. _required_\n\n- β initialZoom: When no search results are found, google map will default to this zoom.\n- β initialPosition: When no search results are found, google map will default to this position.\n- β mapOptions: The options forwarded to the Google Maps constructor.\n- β builtInMarker: Used to customize Google Maps markers. Because of lack of tests we cannot guarantee its compatibility. For more information please visit [InstantSearch related documentation](https://www.algolia.com/doc/api-reference/widgets/geo-search/js/#widget-param-builtinmarker).\n- customHTMLMarker: Same as `builtInMarker`. Because of lack of tests, we cannot guarantee its compatibility. For more information please visit [InstantSearch related documentation](https://www.algolia.com/doc/api-reference/widgets/geo-search/js/#widget-param-customhtmlmarker).\n- β enableRefine: If true, the map is used for refining the search. Otherwise, itβs only for display purposes.\n- β enableClearMapRefinement: If `true`, a button is displayed on the map when the refinement is coming from interacting with it, to remove it.\n- β enableRefineControl: If `true`, the map is used for refining the search. Otherwise, itβs only for display purposes.\n- β enableRefineOnMapMove: If `true`, a button is displayed on the map when the refinement is coming from interacting with it, to remove it.,\n- β templates: The templates to use for the widget.\n- β cssClasses: The CSS classes to override.\n\nCheck out our [geosearch demo](https://github.com/meilisearch/demos/tree/main/src/geo-javascript) for a working example.\n\n#### Requirements\n\nThe Geosearch widget only works with a valid Google API key.\n\nThe example below uses the `@googlemaps/js-api-loader` package to load the Google Maps library before initializing `instantSearch`:\n\n```js\nimport { setOptions, importLibrary } from '@googlemaps/js-api-loader'\n\nconst GOOGLE_MAP_API_KEY = 'YOUR_GOOGLE_MAPS_API_KEY'\n\nsetOptions({\n apiKey: GOOGLE_MAP_API_KEY,\n version: 'weekly',\n})\n\nimportLibrary('maps').then(() => {\n const search = instantsearch({\n indexName: 'geo',\n // ...\n })\n // ...\n})\n```\n\nReplace `YOUR_GOOGLE_MAPS_API_KEY` with your Google API key.\n\nCheck out our [geosearch demo](https://github.com/meilisearch/demos/tree/main/src/geo-javascript) for a working example.\n\n### Usage\n\nThe classic usage, with only the `required` elements, renders an embedded Google Map on which you can move and refine search based on the position maps.\n\n```js\n instantsearch.widgets.geoSearch({\n container: '#maps',\n googleReference: window.google,\n }),\n```\n\nFor further customization, for example to determine an initial position for the map. Contrary to `initialZoom` and `initialPosition`, triggers a search request with the provided information.\n\nThe following parameters exist:\n\n- `boundingBox`: The Google Map window box. It is used as parameter in a search request. It takes precedent on all the following parameters.\n- `aroundLatLng`: The middle point of the Google Map. If `insideBoundingBox` or `boundingBox` is present, it is ignored.\n- `aroundRadius`: The radius around a Geo Point, used for sorting in the search request. It only works if `aroundLatLng` is present as well. If `insideBoundingBox` or `boundingBox` is present, it is ignored.\n- `insidePolygon`: Filters search results to only include documents whose coordinates fall within a specified polygon. This parameter accepts an array of coordinate pairs `[[lat, lng], [lat, lng], ...]` that define the polygon vertices (minimum 3 points required). When `insidePolygon` is specified, it takes precedence over `insideBoundingBox` and `around*` parameters. Polygon filters require documents to contain a valid `_geojson` field with [GeoJSON format](https://geojson.org/). Documents without `_geojson` will not be returned in polygon searches, even if they have `_geo` coordinates.\n\nFor exemple, by adding `boundingBox` in the [`instantSearch`](#-instantsearch) widget parameters, the parameter will be used as a search parameter for the first request.\n\n```js\n initialUiState: {\n geo: {\n geoSearch: {\n boundingBox:\n '50.680720183653065, 3.273798366642514,50.55969330590075, 2.9625244444490253',\n },\n },\n },\n```\nWithout providing this parameter, Google Maps will default to a window containing all markers from the provided search results.\n\nAlternatively, the parameters can be passed through the [`searchFunction`](https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/#widget-param-searchfunction) parameter of the [`instantSearch`](#-instantsearch) widget. Contrary to `initialUiState` these parameters overwrite the values on each search.\n\n```js\n searchFunction: function (helper) {\n helper.setQueryParameter('aroundRadius', 75000)\n helper.setQueryParameter('aroundLatLng', '51.1241999, 9.662499900000057');\n helper.search()\n },\n```\n\nYou can also filter results within a polygon using `insidePolygon`.\n\n```js\nsearch.addWidgets([\n instantsearch.widgets.configure({\n insidePolygon: [\n [50.8466, 4.35],\n [50.75, 4.1],\n [50.65, 4.5],\n ],\n }),\n])\n```\n\nFor more information, read the [geosearch documentation](https://www.meilisearch.com/docs/learn/filtering_and_sorting/geosearch).\n\n### β Answers\n\n[Answers references](https://www.algolia.com/doc/api-reference/widgets/answers/js/).\n\nNo compatibility because Meilisearch does not support this experimental feature.\n\n### β RefinementList\n\n[Refinement list references](https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/)\n\nThe `refinementList` widget is one of the most common widgets you can find in a search UI. With this widget, the user can filter the dataset based on facets.\n\n- β container: The CSS Selector or HTMLElement to insert the refinements. _required_\n- β attribute: The facet to display _required_\n- β operator: How to apply facets, `and` or `or` (`and` is the default value).\n- β limit: How many facet values to retrieve.\n- β showMore: Whether to display a button that expands the number of items.\n- β showMoreLimit: The maximum number of displayed items. Does not work when showMoreLimit > limit.\n- β searchable: Whether to add a search input to let the user search for more facet values. Not supported by Meilisearch. If you'd like to see it implemented [please vote](https://roadmap.meilisearch.com/c/64-search-for-facet-values?utm_medium=social&utm_source=portal_share).\n- β searchablePlaceholder: The value of the search inputβs placeholder. Not supported, see `searchable`.\n- β searchableIsAlwaysActive: When false, disables the facet search input. Not supported, see `searchable`.\n- β searchableEscapeFacetValues: When true, escapes the facet values.\n- β sortBy: Not supported but can be implemented manually using `transformItems` options.\n- β transformItems: A function to transform the items passed to the templates.\n- β templates: The templates to use for the widget.\n- β cssClasses: The CSS classes to override.\n\nThe following example will create a UI component with the a list of genres on which you will be able to facet.\n\n```js\ninstantsearch.widgets.refinementList({\n container: '#refinement-list',\n attribute: 'genres',\n})\n```\n\nβ οΈ To make refinementList work, [please refer to this](#hierarchical-menu-usage).\n\n### β HierarchicalMenu\n\n[Hierarchical menu references](https://www.algolia.com/doc/api-reference/widgets/hierarchical-menu/js/)\n\nThe `hierarchicalMenu` widget is used to create navigation based on a hierarchy of facet attributes. It is commonly used for categories with subcategories. See [usage](#hierarchical-menu-usage) below.\n\n- β container: The CSS Selector or HTMLElement to insert the refinements. _required_\n- β attribute: The name of the attributes to generate the menu with. _required_.\n- β limit: How many facet values to retrieve.\n- β showMore: Whether to display a button that expands the number of items.\n- β showMoreLimit: The maximum number of displayed items (min `2`).\n- β separator: The level separator used in the records. (default `>`).\n- π€·ββοΈ rootPath: The prefix path to use if the first level is not the root level.\n- β showParentLevel: Whether to show the siblings of the selected parent level of the current refined value.\n- β sortBy: How to sort refinements. [See guide](https://www.algolia.com/doc/api-reference/widgets/hierarchical-menu/js/#widget-param-sortby)\n- β templates: The templates to use for the widget.- β templates: The templates to use for the widget.\n- β cssClasses: The CSS classes to override.\n\n#### Hierarchical Menu Usage\nTo make it work with Meilisearch your documents must have a specific structure, an explanation of the structure can [be found here](https://www.algolia.com/doc/api-reference/widgets/hierarchical-menu/js/#requirements).\n\nContrary to `instantsearch.js`, the hierarchical fields are added in [`filterableAttributes`](https://www.meilisearch.com/docs/reference/api/settings#filterable-attributes).\n\nExample:\nGive the following document structure:\n```json\n{\n \"id\": 1,\n \"name\": \"Basic T-shirt\",\n \"categories.lvl0\": \"Men\",\n \"categories.lvl1\": \"Men > clothes\",\n \"categories.lvl2\": \"Men > clothes > t-shirt\"\n }\n```\n\nYou have to add the fields `categories.lvl0`, `categories.lvl1` and `categories.lvl2` in the `filterableAttributes` in your Meilisearch settings.\n```json\n{\n \"filterableAttributes\": [\n \"categories.lvl0\",\n \"categories.lvl1\",\n \"categories.lvl2\"\n ]\n}\n```\n\n\n### β RangeSlider\n\n[Range slider references](https://www.algolia.com/doc/api-reference/widgets/range-slider/js/)\n\nThe `rangeSlider` widget provides a user-friendly way to filter the results, based on a single numeric range.\n\n- β container: The CSS Selector or HTMLElement to insert the refinements. _required_\n- β attribute: The name of the attribute in the document. _required_.\n- β min: The minimum value for the input. _required_\n- β max: The maximum value for the input. _required_\n- β precision: The number of digits after the decimal point to use. Not compatible as only integers work with `rangeSlider`.\n- β step: The number of steps between each handle move.\n- β pips: Whether to show slider pips (ruler marks).\n- β tooltips: Whether to show tooltips. The default tooltips show the raw value.\n- β cssClasses: The CSS classes to override.\n\nTo be able to use the `rangeSlider` on an attribute, the attribute must be in the[`filterableAttributes`](https://www.meilisearch.com/docs/reference/api/settings#filterable-attributes) and must contain numeric values.\n\n### β Menu\n\n[Menu references](https://www.algolia.com/doc/api-reference/widgets/menu/js/)\n\nThe `menu` widget displays a menu that lets the user choose a single value for a specific attribute.\n\n- β container: The CSS Selector or HTMLElement to insert the menu. _required_\n- β attribute: the name of the facet attribute. _required_\n- β limit: How many facet values to retrieve.\n- β showMore: Whether to display a button that expands the number of items.\n- β showMoreLimit: The maximum number of displayed items. Does not work when `showMoreLimit > limit`\n- β sortBy: Not supported natively but can be implemented manually using `transformItems` options.\n- β transformItems: A function to transform the items passed to the templates.\n- β templates: The templates to use for the widget.\n- β cssClasses: The CSS classes to override.\n\n### β currentRefinements\n\n[currentRefinements](https://www.algolia.com/doc/api-reference/widgets/current-refinements/js/)\n\nThe `currentRefinements` widget displays a list of refinements applied to the search.\n\n- β container: The CSS Selector or HTMLElement to insert the current refinements UI. _required_\n- β includedAttributes: The facet name of which checked attributes are included.\n- β excludedAttributes: The facet name of which checked attributes are excluded.\n- β cssClasses: The CSS classes to override.\n- β transformItems: A function to transform the items passed to the templates.\n\n### β RangeInput\n\n[Range input references](https://www.algolia.com/doc/api-reference/widgets/range-input/js/)\n\nThe `rangeInput` widget allows a user to select a numeric range using a minimum and maximum input.\n\n- β container: The CSS Selector or HTMLElement to insert widget into. _required_\n- β attribute: The name of the attribute in the document. _required_.\n- β min: The minimum value for the input.\n- β max: The maximum value for the input\n- β precision: The number of digits after the decimal point to use.\n- β templates: The templates to use for the widget.\n- β cssClasses: The CSS classes to override.\n\nTo be able to use the `RangeInput` on an attribute, the attribute must be in the[`filterableAttributes`](https://www.meilisearch.com/docs/reference/api/settings#filterable-attributes) and must contain numeric values.\n\n### β MenuSelect\n\n[Menu select references](https://www.algolia.com/doc/api-reference/widgets/menu-select/js/)\n\nThe `menuSelect` widget allows a user to select a single value to refine inside a select element.\n\n- β container: The CSS Selector or HTMLElement to insert widget into. _required_\n- β attribute: The name of the attribute in the document. _required_.\n- β limit: How many facet values to retrieve.\n- β [sortBy](https://www.algolia.com/doc/api-reference/widgets/menu-select/js/#widget-param-sortby): Not supported natively but can be implemented manually using `transformItems` options.\n- β templates: The templates to use for the widget.\n- β cssClasses: The CSS classes to override.\n- β transformItems: A function to transform the items passed to the templates.\n\n### β ToggleRefinement\n\n[Toggle refinement references](https://www.algolia.com/doc/api-reference/widgets/toggle-refinement/js/)\n\nThe numericMenu widget displays a list of numeric filters in a list. Those numeric filters are pre-configured when creating the widget.\n\n- β container: The CSS Selector or HTMLElement to insert the widget into. _required_\n- β attribute: The name of the attribute on which apply the refinement. _required_\n- β on: The value of the refinement to apply on the attribute when checked.\n- β off: The value of the refinement to apply on the attribute when unchecked.\n- β templates: The templates to use for the widget.\n- β cssClasses: The CSS classes to override.\n\nThe toggleRefinement widget provides an on/off filtering feature based on an attribute value.\n\n### β NumericMenu\n\n[Numeric Menu references](https://www.algolia.com/doc/api-reference/widgets/numeric-menu/js/)\n\nThe `numericMenu` widget displays a list of numeric filters in a list. Those numeric filters are pre-configured when creating the widget.\n\n- β container: The CSS Selector or HTMLElement to insert the widget into. _required_\n- β attribute: The name of the attribute in the document. _required_.\n- β items: A list of all the options to display. _required_\n- β templates: The templates to use for the widget.\n- β cssClasses: The CSS classes to override.\n- β transformItems: function receiving the items, called before displaying them.\n\n### β RatingMenu\n\n[Rating menu references](https://www.algolia.com/doc/api-reference/widgets/rating-menu/js/)\n\nThe `RatingMenu` widget lets the user refine search results by clicking on stars. The stars are based on the selected attribute.\n\n- β container: The CSS Selector or HTMLElement to insert the widget into. _required_\n- β attribute: The name of the attribute in the document. _required_.\n- β max: The maximum value for the rating. This value is exclusive, which means the number of stars will be the provided value, minus one.\n- β templates: The templates to use for the widget.\n- β cssClasses: The CSS classes to override.\n\nContrary to `instantsearch.js`, To be able to use `RatingMenu` the field containing the rating has to be added in the [`filterableAttributes`](https://www.meilisearch.com/docs/reference/api/settings#filterable-attributes) setting in your index settings.\n\n### β ClearRefinements\n\n[Clear refinements references](https://www.algolia.com/doc/api-reference/widgets/clear-refinements/js/)\n\nThe `clearRefinement` widget displays a button that lets the user clean every refinement applied to the search. You can control which attributes are impacted by the button with the options.\n\n- β container: The CSS Selector or HTMLElement to insert the widget into. _required_\n\n```js\ninstantsearch.widgets.clearRefinements({\n container: '#clear-refinements',\n }),\n```\n\n### β Pagination\n\n[Pagination references](https://www.algolia.com/doc/api-reference/widgets/pagination/js/)\n\nThe `pagination` widget displays a pagination system allowing the user to change the current page. It should be used alongside the [`finitePagination`](#finite-pagination) setting to render the correct amount of pages.\n\n- β container: The CSS Selector or HTMLElement to insert the widget into. _required_\n- β showFirst: Whether to display the first-page link.\n- β showPrevious: Whether to display the previous page link.\n- β showNext: Whether to display the next page link.\n- β showLast: Whether to display the last page link.\n- β padding: The number of pages to display on each side of the current page.\n- β totalPages: The maximum number of pages to browse.\n- β scrollTo: Where to scroll after a click. Set to false to disable.\n- β templates: The templates to use for the widget.\n- β cssClasses: The CSS classes to override.\n\n```js\ninstantsearch.widgets.pagination({\n container: '#pagination',\n})\n```\n\n### β HitsPerPage\n\n[Hits per page references](https://www.algolia.com/doc/api-reference/widgets/hits-per-page/js/)\n\nThe `hitsPerPage` widget displays a dropdown menu to let the user change the number of displayed hits.\n\n- β container: The CSS Selector or HTMLElement to insert the widget into. _required_\n- β [items](https://www.algolia.com/doc/api-reference/widgets/hits-per-page/js/#widget-param-items): The list of available options _required_\n- β cssClasses: The CSS classes to override.\n- β transformItems: function receiving the items, called before displaying them.\n\n### β Breadcrumb\n\n[Breadcrumb references](https://www.algolia.com/doc/api-reference/widgets/breadcrumb/js/)\n\nThe `breadcrumb` widget is a secondary navigation scheme that lets the user see where the current page is in relation to the facetβs hierarchy. The `HierarchicalMenu` widget has the same requirements, see its [usage](#hierarchical-menu-usage) to make breadcrumb work.\n\n- β container: The CSS Selector or HTMLElement to insert the refinements. _required_\n- β attribute: The name of the attributes to generate the menu with. _required_.\n- β separator: The level separator used in the records. (default `>`).\n- π€·ββοΈ rootPath: The prefix path to use if the first level is not the root level.\n- β templates: The templates to use for the widget.\n- β cssClasses: The CSS classes to override.\n\n\n### β Stats\n\n[Stats references](https://www.algolia.com/doc/api-reference/widgets/stats/js/)\n\nThe `stats` widget displays the total number of matching hits and the time it took to get them (time spent in the Algolia server).\n\n- β container: The CSS Selector or HTMLElement to insert the widget into. _required_\n- β cssClasses: The CSS classes to override.\n- β transformItems: function receiving the items, called before displaying them.\n\n```js\ninstantsearch.widgets.stats({\n container: '#stats',\n})\n```\n\n### β Analytics\n\n[Analytics](https://www.algolia.com/doc/api-reference/widgets/analytics/js/)\n\nDeprecated. See [Insight](#-insight).\n\n### β QueryRuleCustomData\n\n[QueryRuleCustomData references](https://www.algolia.com/doc/api-reference/widgets/query-rule-custom-data/js/)\n\nYou may want to use this widget to display banners or recommendations returned by [Rules](https://www.algolia.com/doc/api-client/methods/rules/), and that match search parameters.\n\nNo compatibility because Meilisearch does not support Rules.\n\n### β QueryRuleContext\n\n[Query rule context references](https://www.algolia.com/doc/api-reference/widgets/query-rule-context/js/)\n\nThe queryRuleContext widget lets you apply ruleContexts based on filters to trigger context-dependent [Rules](https://www.algolia.com/doc/api-client/methods/rules/).\n\nNo compatibility because Meilisearch does not support Rules.\n\n### β SortBy\n\n[Sort by references](https://www.algolia.com/doc/api-reference/widgets/sort-by/js/)\n\nThe `SortBy` widget is used to create multiple sort formulas. Allowing a user to change the way hits are sorted.\n\n- β container: The CSS Selector or HTMLElement to insert the widget into. _required_\n- β items: The list of different sorting possibilities. _required_\n- β cssClasses: The CSS classes to override.\n- β transformItems: function receiving the items, called before displaying them.\n\nThe usage of the `SortBy` widget differs from the one found in Algolia's documentation. In instant-meilisearch the following is possible:\n\n- Sort using different indexes.\n- Different `sort` rules on the same index.\n\nThe items list is composed of objects containing every sort possibility you want to provide to your user. Each object must contain two fields:\n - `label`: What is showcased on the user interface ex: `Sort by Ascending Price`\n - `value`: The sort formula.\n\n#### Sort formula\n\nA sort formula is expressed like this: `index:attribute:order`.\n\n`index` is mandatory, and when adding `attribute:order`, they must always be added together.\n\nWhen sorting on an attribute, the attribute has to be added to the [`sortableAttributes`](https://www.meilisearch.com/docs/reference/api/settings#sortable-attributes) setting on your index.\n\nExample:\n```js\n[\n { label: 'Sort By Price', value: 'clothes:price:asc' }\n]\n```\n\nIn this scenario, in the `clothes` index, we want the price to be sorted in an ascending way. For this formula to be valid, `price` must be added to the `sortableAttributes` settings of the `clothes` index.\n\n#### Relevancy\n\nThe impact sorting has on the returned hits is determined by the [`ranking-rules`](https://www.meilisearch.com/docs/learn/core_concepts/relevancy#ranking-rules) ordered list of each index. The `sort` ranking-rule position in the list makes sorting documents more or less important than other rules. If you want to change the sort impact on the relevancy, it is possible to change it in the [ranking-rule setting](https://www.meilisearch.com/docs/learn/core_concepts/relevancy#relevancy). For example, to favor exhaustivity over relevancy.\n\nSee [relevancy guide](https://www.meilisearch.com/docs/learn/core_concepts/relevancy#relevancy).\n\n#### Example\n\n```js\n instantsearch.widgets.sortBy({\n container: '#sort-by',\n items: [\n { value: 'clothes', label: 'Relevant' }, // default index\n {\n value: 'clothes:price:desc', // Sort on descending price\n label: 'Ascending price using query time sort',\n },\n {\n value: 'clothes:price:asc', // Sort on ascending price\n label: 'Descending price using query time sort',\n },\n {\n value: 'clothes-sorted', // different index with different ranking rules.\n label: 'Custom sort using a different index',\n },\n ],\n }),\n```\n\n### β RelevantSort\n\n[Relevant Sort references](https://www.algolia.com/doc/api-reference/widgets/relevant-sort/js/)\n\nVirtual indices allow you to use Relevant sort, a sorting mechanism that favors relevancy over the attribute youβre sorting on.\n\n### β Routing\n\nRouting is configured inside `instantSearch` component. Please refer [to the documentation](https://www.algolia.com/doc/api-reference/widgets/simple-state-mapping/js/) for further implementation information.\n\n\n## βοΈ Development Workflow and Contributing\n\nAny new contribution is more than welcome in this project!\n\nIf you want to know more about the development workflow or want to contribute, please visit our [contributing guidelines](/CONTRIBUTING.md) for detailed instructions!\n\n