We will show how to build different kinds of search experiences with Atlas Search using the Vue Searchbox and Vue ReactiveSearch libraries.

The ReactiveSearch Realm function endpoint exposes a REST API that all of ReactiveSearch and Searchbox UI libraries use to express the declarative search intent. The ReactiveSearch API is documented over here.

For this guide, we are making use of a publicly deployed Realm endpoint. You can substitute this with your deployed function's URL.

Copy 
url=https://us-east-1.aws.webhooks.mongodb-realm.com/api/client/v2.0/app/public-demo-skxjb/service/http_endpoint/incoming_webhook/reactivesearch

Note: Some of the examples make use of specific data types such as geopoint or autocomplete. These are already preset in the indexes they're queried against in these examples. However, if you're replacing the Realm function endpoint with your own, some data types need to be set prior to running the queries.

All of these examples can be deployed using MongoDB Realm's static hosting feature with one CLI command and a click. Read the Search UI hosting guide over here.

Our first set of examples make use of the Vue Searchbox library, a UI library focused on building search-as-you-type experiences. This library is performant and lightweight (~20KB min+gzip size), comes with a pre-built SearchBox component and provides a general purpose SearchComponent that can be used to bind with any UI component.

Facet (list) examples

A single/multi select facet UI is typically represented with a term query. Here, we will take a look at different ways of creating this UI.

Getting the top buckets

Sort buckets by asc order

By default, the facet buckets are sorted by count. This example uses the sortBy="asc" prop to order the buckets in ascending order.

Finding any or all of the facet items: A multi-select filtering use-case

The queryFormat prop which accepts "or" or "and" as values allows setting whether the results get filtered by an any ("or") matching clause or by an all ("and") matching clause. The following example uses the "and" value to filter Airbnb listings by those that satisfy all the selected amenities.

Search (typeahead) examples

A searchbox UI component is typically used for building an autosuggestions or a highlighting based experience.

Searching on specific fields with weights

The dataField prop of SearchBox component allows setting weighted fields (aka paths). In this example, we will use this to search on name and description fields with a higher boost associated with the name field.

Copy 
dataField={[
    {
        field: "name",
        weight: 3
    },
    {
        field: "description",
        weight: 1
    }
]}

Showing default suggestions

The defaultSuggestions prop of SearchBox component allows setting initial suggestions to show in the searchbox (typeahead) example.

Copy 
defaultSuggestions={[
    {
        label: "Oceanfront Resort",
        value: "oceanfront resort"
    },
    {
        label: "Private cabin",
        value: "private cabin"
    },
    {
        label: "Duplex apartment",
        value: "duplex apartment"
    }
]}

A fuzzy search example

The fuzziness prop of Searchbox component enables finding matches even when the user input contains a typo.

Searching on autocomplete type

The autocompleteField prop of Searchbox is similar to the dataField prop, but allows setting fields with autocomplete type to search on.

Show results on each keystroke

The autosuggest prop controls whether the autosuggestions UI is used or not. By setting it to false in this example, search is made on each keystroke.

Range examples

With ReactiveSearch

Our next set of examples use Vue ReactiveSearch, the most popular Vue UI kit for building search experiences. ReactiveSearch comes with over 10+ pre-built UI components, allowing you to build faceted, numeric and full-text search use-cases with ease.

DataSearch example

MultiList example

RangeInput example

UI Customization Guide

Looking to customize styles, rendering of a UI component or bring your own design system? See the ReactiveSearch UI customization guide.