search

Also see /react/input#search

Styling the React Input component

Also see /react/nav#search-input

Search input for Nav component

Search with button

Suitable for big/slow server-side search.
Click search button to perform search with onIconClick.
Trigger on Enter key with onKeyPress.
If a new search is performed, overwrite results from the previous request.
When search field is empty, do nothing on button click / Enter.

Type in the search box, then click the button or hit Enter to initiate a search

Live filter

Suitable when you already have the full dataset available locally.
Result list is updated immediately while typing so there no need to press enter, have a search button, or a loading spinner.
If there is a large dataset (makes the filtering slow), consider using a debounce so you don't risk locking the UI while the user is typing.

Algrim

Clint Barton

Darcy Lewis

Destroyer

Erik Selvig

Fandral

Fenris Wolf

Frigga

Grandmaster

Heimdall

Hela

Hogun

Hulk

Jane Foster

Korg

Laufey

Loki

Malekith

Miek

Nick Fury

Odin

Phil Coulson

Sif

Skurge

Surtur

Thor

Valkyrie

Volstagg

Global search hotkey

If you have an app-global search (in topbar, for example) it should be focusable using:

⌘ + K on macOS
Ctrl + K on Windows/Linux.

Also see /react/useHotkey

React hook

Code sandbox

Search with button

import { useState } from "react";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import Input from "@intility/bifrost-react/Input";
import Grid from "@intility/bifrost-react/Grid";

export default function ButtonSearchDemo() {
  const [searchValue, setSearchValue] = useState("");
  const [loading, setLoading] = useState(false);
  const [submittedSearch, setSubmittedSearch] = useState("");

  const simulateHttpRequest = () => {
    // do nothing if input field is empty
    if (!searchValue) return;
    setLoading(true);
    // pretend to send a http request that takes 1s
    setTimeout(() => {
      setSubmittedSearch(searchValue);
      setLoading(false);
    }, 1000);
  };

  return (
    <Grid>
      <Input
        value={searchValue}
        onChange={(e) => setSearchValue(e.target.value)}
        // trigger search on Enter keypress
        onKeyPress={(e) => {
          if (e.key === "Enter") simulateHttpRequest();
        }}
        // trigger search on button click
        onIconClick={simulateHttpRequest}
        icon={faSearch}
        iconButton
        rightIcon
        label="Search with button"
        hideLabel
        placeholder="Search for..."
        clearable
        loading={loading}
      />
      <p>
        {submittedSearch
          ? `[search results for ${submittedSearch}]`
          : "Type in the search box, then click the button or hit Enter to initiate a search"}
      </p>
    </Grid>
  );
}

Open Sandbox

Live filter

import { useState } from "react";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import Input from "@intility/bifrost-react/Input";
import AutoCol from "@intility/bifrost-react/AutoCol";
import Grid from "@intility/bifrost-react/Grid";
import Card from "@intility/bifrost-react/Card";

const dataSet = [
  "Algrim",
  "Clint Barton",
  "Darcy Lewis",
  "Destroyer",
  "Erik Selvig",
  "Fandral",
  "Fenris Wolf",
  "Frigga",
  "Grandmaster",
  "Heimdall",
  "Hela",
  "Hogun",
  "Hulk",
  "Jane Foster",
  "Korg",
  "Laufey",
  "Loki",
  "Malekith",
  "Miek",
  "Nick Fury",
  "Odin",
  "Phil Coulson",
  "Sif",
  "Skurge",
  "Surtur",
  "Thor",
  "Valkyrie",
  "Volstagg",
];
export default function LiveFilterDemo() {
  const [searchValue, setSearchValue] = useState("");

  // if search input has no value, use full dataset, otherwise filter it
  // by comparing lowercase version of search input and array item
  const searchResults = !searchValue
    ? dataSet
    : dataSet.filter((x) =>
        x.toLowerCase().includes(searchValue.toLowerCase()),
      );

  return (
    <Grid>
      <Input
        placeholder="Filter..."
        label="Live filter local data"
        hideLabel
        icon={faSearch}
        clearable
        value={searchValue}
        onChange={(e) => setSearchValue(e.target.value)}
      />
      <div style={{ minHeight: 408 }}>
        <AutoCol width={150}>
          {searchResults.map((result) => (
            <Card key={result}>
              <Card.Title>{result}</Card.Title>
            </Card>
          ))}
        </AutoCol>
      </div>
    </Grid>
  );
}

Open Sandbox