Input

The Input component is used to capture query input via a text field. It can also provide suggestions, typeahead and instant search modes.

Import

import { Input } from 'sajari/react-search-ui';

import { Input } from 'sajari/react-search-ui';

Usage

Additional imports used in the examples:

import { FieldDictionary, Pipeline, Results, SearchProvider } from '@sajari/react-search-ui';

import { FieldDictionary, Pipeline, Results, SearchProvider } from '@sajari/react-search-ui';

Editable Example

Suggestions

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );

  const SearchPlayground = React.memo(() => (
    <div className="space-y-4">
      <Input />
      <Results />
    </div>
  ));

  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );
  const SearchPlayground = React.memo(() => (
    <div className="space-y-4">
      <Input />
      <Results />
    </div>
  ));
  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

Suggestions

Editable Example

Suggestions

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );

  const SearchPlayground = React.memo(() => (
    <div className="space-y-4">
      <Input mode="suggestions" />
      <Results />
    </div>
  ));

  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );
  const SearchPlayground = React.memo(() => (
    <div className="space-y-4">
      <Input mode="suggestions" />
      <Results />
    </div>
  ));
  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

Results

Editable Example

Results

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
    new ClickTracking(),
  );

  const SearchPlayground = React.memo(() => <Input mode="results" />);

  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
    new ClickTracking(),
  );
  const SearchPlayground = React.memo(() => <Input mode="results" />);
  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

Typeahead

Editable Example

Suggestions

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );

  const SearchPlayground = React.memo(() => (
    <div className="space-y-4">
      <Input mode="typeahead" />
      <Results />
    </div>
  ));

  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );
  const SearchPlayground = React.memo(() => (
    <div className="space-y-4">
      <Input mode="typeahead" />
      <Results />
    </div>
  ));
  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

Standard

By default <Input /> has an additional mode "instant" and it is also the default value (search on change). To disable it, simple change mode to "standard".

Editable Example

Suggestions

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );

  const SearchPlayground = React.memo(() => (
    <div className="space-y-4">
      <Input mode="standard" />
      <Results />
    </div>
  ));

  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );
  const SearchPlayground = React.memo(() => (
    <div className="space-y-4">
      <Input mode="standard" />
      <Results />
    </div>
  ));
  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

Existing input element

If you have an existing input and don't want Input to render another extra input of its own then you can pass in the inputElement prop, this way it will not render its own input and instead will apply all attributes and handlers to the element that you just passed in.

Editable Example

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );
  const inputRef = React.useRef();

  const SearchPlayground = () => (
    <div className="space-y-4">
      <input
        className="border border-gray-300 rounded-md py-1 px-2"
        type="text"
        data-custom="test"
        id="custom-input"
        ref={inputRef}
      />
      <Input mode="suggestions" inputElement={inputRef} />
      <Results />
    </div>
  );

  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );
  const inputRef = React.useRef();
  const SearchPlayground = () => (
    <div className="space-y-4">
      <input
        className="border border-gray-300 rounded-md py-1 px-2"
        type="text"
        data-custom="test"
        id="custom-input"
        ref={inputRef}
      />
      <Input mode="suggestions" inputElement={inputRef} />
      <Results />
    </div>
  );
  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

Minimum characters

The minimum characters needed to perform a search request, default is 0. (search on every keystroke)

Editable Example

Suggestions

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );

  const SearchPlayground = React.memo(() => (
    <div className="space-y-4">
      <Input minimumCharacters={3} />
      <Results />
    </div>
  ));

  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );
  const SearchPlayground = React.memo(() => (
    <div className="space-y-4">
      <Input minimumCharacters={3} />
      <Results />
    </div>
  ));
  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

Props

Input component props inherits the input element props with some additional for speech recognition and loading state

Name	Type	Default	Description
`mode`	`'standard'` \| `'typeahead'` \| `'suggestions'` \| `'results'` \| `'instant'`	`'standard'`	The mode of the combobox. `'standard'` will operate as a normal text input. `'typeahead`' will provide an inline completion suggestion. `'suggestions'` will provide an autocomplete menu with options to select. `'results'` will perform a full search using the provided term and render full results.
`maxSuggestions`	`number`		Sets how many autocomplete suggestions are shown in the box below the search input.
`retainFilters`	`boolean`	`false`	Keep filters when a user performs a new search.
`minimumCharacters`	`number`	`0`	Minimum characters needed to perform a search request.

It also composes the Combobox component a subset of the following props are also valid:

Name	Type	Default	Description
`placeholder`	`string`	`'Search'`	The placeholder of the input.
`onChange`	`(value: string) => void`		The callback when the input value changes. Note: The `event` is not passed as the argument.
`onSelect`	`(value: T) => void`		The callback when an item is selected.
`inputElement`	`{ current: HTMLInputElement }`		Input element to render the combobox in attach mode.
`portalContainer`	`document.body`		The portal container which will be the container for the combobox's dropdown.
`enableVoice`	`boolean`	`false`	Whether to enable speech recognition (Compatibility table.)
`className`	`string`
`showDropdownTips`	`boolean`	`false`	Whether to show tips in the dropdown on how to navigate the options.
`showPoweredBy`	`boolean`	`true`	Whether to show the "Powered by Sajari" in the dropdown.
`variant`	`'outline'` \| `'unstyled'`	`outline`	The appearance of the combobox.
`size`	`'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'2xl'`	`md`	The size of the combobox.