Skip to main content

Develop with FastTrack

SearchBox

The SearchBox widget displays a text box for entering a MarkLogic string query and a button for submitting the query. It also includes an optional dropdown menu for selecting and submitting a collection constraint.

Example configuration

This example shows a configured SearchBox widget in a React search application:

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, ResultsSnippet } from "ml-fasttrack";
 
function App() {
 
  const context = useContext(MarkLogicContext);
 
  const handleSearch = (params) => {
    context.setQtext(params?.q);
    context.setCollections(params?.collections);
  } 
 
  return (
    <div className="App">
      <div>
        <SearchBox 
          onSearch={handleSearch} 
          placeholder="Enter search text"
          menuThemeColor="dark"
          buttonThemeColor="light"
          menuItems={[
            {
              value: ['person', 'organization'],
              label: 'All Entities'
            },
            {
              value: ['person'],
              label: 'Person'
            },
            {
              value: ['organization'],
              label: 'Organization'
            }
          ]}
        />
      </div>
      <div>
        <ResultsSnippet results={context.searchResponse.results} />
      </div>
    </div>
  );
}
 
export default App;

Code explanation

The configured SearchBox widget includes:

  • A text input field for typing a search string that is prefilled with a placeholder string.

  • A dropdown menu with selections for All Entities, Person, and Organization. To exclude the dropdown menu, do not set a menuItems prop.

  • A submit button for executing a search. 

  • A callback function that receives an object with the selected menu item, and the search string when a search is submitted. The search information is set in the application context by the callback function.

  • Style settings for the dropdown menu and submit button.

For more information, see API.

Example rendering

The Code explanation displays this:

The SearchBox widget.

API

Prop

Type

Description

menuItems

{ label: string; value: string[]; }[]

Array of configuration objects for menu items. Value properties correspond to array of one or more document collections in MarkLogic.

value

string

Default search string.

menuThemeColor

"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse"

The theme color for the menu. See the KendoReact DropDownButtonProps.

menuFillMode

"link" | "solid" | "outline" | "flat"

Kendo fill mode for the menu. See the KendoReact DropDownButtonProps.

buttonThemeColor

"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse"

The theme color variant for the search button. See the KendoReact DropDownButtonProps.

placeholder

string

Placeholder value for the text field.

className

string

Class name applied to the widget.

ariaLabel

function

Aria label attribute applied to the text field.

containerStyle

CSSProperties

CSS styles applied to the widget.

dropdownButtonStyle

CSSProperties

CSS styles applied to the menu button.

dropdownItemStyle

CSSProperties 

CSS styles applied to each menu item.

rightButtonStyle

CSSProperties

CSS styles applied to the search button.

boxStyle

CSSProperties

CSS styles applied to the text field.

selected

number

Index of the element in the menu items array to set by default.

disabled

boolean

Whether the text field is disabled. The default is false.

searchSuggest

boolean

Turn on typeahead search suggestions.

searchSuggestMin

number

Minimum number of characters required before suggestions are shown when searchSuggest is turned on. If unspecified, the default number of characters needed before suggestions appear is 1.

searchSuggestSubmit

boolean

Indicates whether selecting a search suggestion from the menu will automatically submit a query.

searchSuggestLimit

number

Optional numeric setting for limiting the number of suggestions being returned. Default is 10.

showLoading

boolean

Display a loading indicator while search suggestions are requested.

selectedLabel

string

String label to set in the menu by default.

onChange

((event: AutoCompleteChangeEvent) => void)

Callback function triggered by a change in the text field.

onChangeMenu

((menuIndex: number) => void)

Callback function triggered by a change in the menu.

onClick

((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)

Callback function triggered by a search button click. Called before onSearch.

onEnter

((event: KeyboardEvent<HTMLInputElement>) => void)

Callback function triggered by a keyboard enter event on text field. Called before onSearch.

onSearch

((params: { q: string; collections: string[]; }) => void)

Callback function for a search-button click or text-field enter event. Called after onClick and onEnter.
In this section: