SearchBox

Save PDF

Last Updated: May 5, 2026
4 minute read

MarkLogic Server
Documentation

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. Deprecated since v2.0.0. Use `DropDownButtonProps.themeColor` instead.
menuFillMode	"link" \| "solid" \| "outline" \| "flat"	Kendo fill mode for the menu. See the KendoReact DropDownButtonProps. Deprecated since v2.0.0. Use `DropDownButtonProps.fillMode` instead.
buttonThemeColor	"base" \| "primary" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "dark" \| "light" \| "inverse"	The theme color variant for the search button. See the KendoReact DropDownButtonProps. Deprecated since v2.0.0. Use `ButtonProps.themeColor` instead.
placeholder	string	Placeholder value for the text field. Deprecated since v2.0.0. Use `AutoCompleteProps.placeholder` instead.
className	string	Class name applied to the widget.
ariaLabel	string	Aria label attribute applied to the text field. Deprecated since v2.0.0. Use `AutoCompleteProps.ariaLabelledBy` instead.
containerStyle	CSSProperties	CSS styles applied to the widget.
dropdownButtonStyle	CSSProperties	CSS styles applied to the menu button. Deprecated since v2.0.0. Use `DropDownButtonProps.style` instead.
dropdownItemStyle	CSSProperties	CSS styles applied to each menu item.
rightButtonStyle	CSSProperties	CSS styles applied to the search button. Deprecated since v2.0.0. Use `ButtonProps.style` instead.
boxStyle	CSSProperties	CSS styles applied to the text field. Deprecated since v2.0.0. Use `AutoCompleteProps.style` instead.
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. Deprecated since v2.0.0. Use `AutoCompleteProps.disabled` instead.
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	((text: string) => void)	Callback function triggered by a change in the text field. Receives the updated input text value.
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 \| undefined; collections: string[]; }) => void)	Callback function for a search-button click or text-field enter event. Called after `onClick` and `onEnter`.
AutoCompleteProps	Partial<AutoCompleteProps>	Additional props passed directly to the KendoReact AutoComplete input component. Replaces the individual deprecated style and behavior props for the text field. See KendoReact AutoCompleteProps.
ButtonProps	Partial<ButtonProps>	Additional props passed directly to the KendoReact Button component for the submit button. Replaces the individual deprecated style and theme props for the search button. See KendoReact ButtonProps.
DropDownButtonProps	Partial<DropDownButtonProps>	Additional props passed directly to the KendoReact DropDownButton component for the collection menu. Replaces the individual deprecated style and theme props for the menu button. See KendoReact DropDownButtonProps.
ref	const searchRef = useRef(null);	A React ref object that exposes imperative methods for controlling the search box. See ISearchBoxRef API.

ISearchBoxRef API

The ref prop accepts a React ref object that provides imperative access to the SearchBox component:

const searchRef = useRef(null);

// Set the search text programmatically and trigger search
searchRef.current?.set('new search term');

// Clear the search box and trigger onSearch with an empty query
searchRef.current?.clearAll();

// Check whether the search box contains user input
if (searchRef.current?.isDirty) { ... }

Property / Method	Type	Description
isDirty	boolean	Whether the search box currently contains a non-empty value.
set	(value: string) => void	Sets the search text programmatically and dispatches a search with the provided value.
clearAll	() => void	Clears the search text and dispatches a search with an empty query.

Develop with FastTrack

SearchBox

Table of Contents

SearchBox