SpeedSearch

Speed search allows for searching in any UI that represents a collection of items. It detects stop points in each item, and you can type only one or more character from the beginning of each stop point. The name is kept inline with the original implementation.

Features

• Detecting stop points based on casing, use of non-alphabetic characters, etc., with a high degree of matching the original implementation.
• Highlighting matches in items
• Showing search query as an overlay at the top left, with visual feedback about search result.
• Low level API for implementing speed search for any UI component.
• Higher level API for integrating speed search with Collection components, such as List, Tree, etc.

Integration with other components

Normally, you don't need to use speed search hooks and components directly. Collection component like List or Tree come with a version with built-in support for speed search.

See SpeedSearchList, SpeedSearchTree.

Advanced use

Low level speed search API

SpeedSearch component is container, which when focused, captures the search query as the user starts typing. It shows the search query as an overlay at the top left of the container. The state of the speed search (search query, and the state of search being active or not) can be controlled or left uncontrolled.

Note

SpeedSearch component doesn't have anything to do with the search logic itself, it only captures the UI behaviour of a container that supports Speed Search.

Here is a very simple, and functionally incomplete example of using SpeedSearch. Click anywhere in the container box to move focus to it, and start typing:

Result

Loading...

Live Editor

function SpeedSearchExample() { return ( <> <SpeedSearch className="my-speed-search"> <ul> <li>Paco de lucia</li> <li>Vicente Amigo</li> <li>Gerardo Nunez</li> </ul> </SpeedSearch> <style> {` .my-speed-search { border: 1px solid #aaa; } .my-speed-search:focus { border-color: blue; } `} </style> </> ); }

function SpeedSearchExample() {
  return (
    <>
      <SpeedSearch className="my-speed-search">
        <ul>
          <li>Paco de lucia</li>
          <li>Vicente Amigo</li>
          <li>Gerardo Nunez</li>
        </ul>
      </SpeedSearch>
      <style>
        {`
          .my-speed-search {
            border: 1px solid #aaa;
          }
          .my-speed-search:focus {
            border-color: blue;
          }
        `}
      </style>
    </>
  );
}

minusculeMatch function can be used to do the actual search in a string and get back the matched ranges. Then TextWithHighlights can be used to show the matches. Here is a full example:

Result

Loading...

Live Editor

function FullSpeedSearchExample() { const items = ["Paco de Lucia", "Vicente Amigo", "Gerardo Nunez"]; const [searchTerm, setSearchTerm] = useState(""); const [active, setActive] = useState(false); const searchResult = useMemo( () => items.reduce((result, item) => { result[item] = minusculeMatch(item, searchTerm); return result; }, {}), [searchTerm] ); const match = Object.values(searchResult).some((i) => i); return ( <> <SpeedSearch className="my-speed-search" searchTerm={searchTerm} onSearchTermChange={setSearchTerm} isSearchActive={active} onIsSearchActiveChange={setActive} match={match} > <ul> {items.map((item) => ( <li key={item}> <TextWithHighlights highlights={searchResult[item]}> {item} </TextWithHighlights> </li> ))} </ul> </SpeedSearch> <style> {` .my-speed-search { border: 1px solid #aaa; } .my-speed-search:focus { border-color: blue; } `} </style> </> ); }

function FullSpeedSearchExample() {
  const items = ["Paco de Lucia", "Vicente Amigo", "Gerardo Nunez"];
  const [searchTerm, setSearchTerm] = useState("");
  const [active, setActive] = useState(false);
  const searchResult = useMemo(
    () =>
      items.reduce((result, item) => {
        result[item] = minusculeMatch(item, searchTerm);
        return result;
      }, {}),
    [searchTerm]
  );
  const match = Object.values(searchResult).some((i) => i);
  return (
    <>
      <SpeedSearch
        className="my-speed-search"
        searchTerm={searchTerm}
        onSearchTermChange={setSearchTerm}
        isSearchActive={active}
        onIsSearchActiveChange={setActive}
        match={match}
      >
        <ul>
          {items.map((item) => (
            <li key={item}>
              <TextWithHighlights highlights={searchResult[item]}>
                {item}
              </TextWithHighlights>
            </li>
          ))}
        </ul>
      </SpeedSearch>
      <style>
        {`
          .my-speed-search {
            border: 1px solid #aaa;
          }
          .my-speed-search:focus {
            border-color: blue;
          }
        `}
      </style>
    </>
  );
}

hooks

SpeedSearch component is built on top of a couple of hooks:

• useSpeedSearch: encapsulates event handling logic for speed search container
• useSpeedSearchState: encapsulates state management for searchTerm and active state.

SpeedSearch merely uses those hooks together with SpeedSearchContainer and SpeedSearchPopup which are dump UI components.

Collection Speed Search API

If you are implementing a new collection component (similar to List, Tree, Table, etc.) this low level hook can be used to add support for speed search in that component. More documentation to be added here.