SearchBox

Save PDF

Last Updated: May 5, 2026
3 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.
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`.

Develop with FastTrack

SearchBox

Table of Contents

SearchBox