Add typehead search for SearchBox

You can turn on the typeahead search feature in the SearchBox widget to display search suggestions as the user types. By configuring the MarkLogic database and installing query options for suggestions, you can specify what parts of the documents are considered when retrieving suggestions.

Database Configuration

Configure the MarkLogic database to support suggestions. In the example that follows, a field has been defined so that the suggestions come from specific elements in the documents. For more about fields, see Fields Database Settings.

The following is a screenshot from the Admin UI application showing the defined suggest-field field:

Query Options Configuration

In your search application’s query options, define your suggestion source based on the database configuration, for example:

 <options xmlns="http://marklogic.com/appservices/search">
    <default-suggestion-source>
      <range type="xs:string">
        <field name="suggest-field" collation="http://marklogic.com/collation/"/>
      </range>
    </default-suggestion-source>
  </options>

For details, see Install Query Options.

Example SearchBox Configuration

Turn on and configure search suggestions in your SearchBox widget, for example:

import { SearchBox } from 'ml-fasttrack'
// ...
<SearchBox
  menuThemeColor="dark"
  buttonThemeColor="light"
  placeholder="Search..."
  searchSuggest={true}
  searchSuggestMin={3}
  searchSuggestSubmit={true}
  searchSuggestLimit={10}
  showLoading={true}
  onSearch={handleSearch}
  menuItems={searchBox.items}
  value={''}
  containerStyle={{ width: '470px' }}
  boxStyle={{ height: 40 }}
  dropdownItemStyle={{ fontSize: 14 }}
/>

For details about SearchBox props, see SearchBox.

Rendered typehead search

When a user types a minimum number of characters in the search box, the search box displays a menu of search suggestions, if any are found. Behind the scenes, MarkLogicContext makes calls to the GET /v1/suggest REST endpoint to retrieve suggestions based on the query options.

With the above code and configuration in place, typing “Sch” in the search box displays a dropdown list of field elements that begin with those characters.