v7.3.0

QuickFind
Feature

Feature that allows the user to search in a column by focusing a cell and typing. Navigate between hits using the keyboard, f3 or ctrl/cmd + g moves to next, also pressing shift moves to previous.

This feature is disabled by default.

Keyboard shortcuts

This feature has the following default keyboard shortcuts:

Keys Action Action description
F3 goToNextHit Move focus to next search hit
Shift+F3 goToPrevHit Move focus to previous search hit
Ctrl+G goToNextHit Move focus to next search hit
Ctrl+Shift+G goToPrevHit Move focus to previous search hit
Ctrl+Shift+F3 showFilterEditor Shows the filter editor
Escape clearSearch Removes the search completely

Please note that Ctrl is the equivalent to Command and Alt is the equivalent to Option for Mac users

For more information on how to customize keyboard shortcuts, please see our guide

// enable QuickFind
const grid = new Grid({
  features: {
    quickFind: true
  }
});

// navigate to next hit programmatically
grid.features.quickFind.gotoNextHit();

When Store has lazyLoad, this feature will only work on locally available data.

See also

  • Search - Full grid search with highlighting
  • Filter - Data filtering
No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

Properties

Properties are getters/setters or publicly accessible variables on this class

Functions

Functions are methods available for calling on the class
    • clear( )

      Clears and closes QuickFind.

    • gotoFirstHit( )

      Go to the first hit.

    • gotoLastHit( )

      Go to the last hit.

    • gotoNextHit( )

      Select the next hit, scrolling it into view. Triggered with [f3] or [ctrl]/[cmd] + [g].

    • gotoPrevHit( )

      Select the previous hit, scrolling it into view. Triggered with [shift] + [f3] or [shift] + [ctrl]/[cmd] + [g].

    • hideQuickFind( )
      private

      Hide the "searchfield" and remove highlighted hits. Called automatically when pressing [esc] or backspacing away the keywords.

    • renderCell( )
      private

      Called from SubGrid when a cell is rendered.

    • showQuickFind( )
      private

      Shows a "searchfield" in the header. Triggered automatically when you have a cell focused and start typing.

    CSS variables

    CSS variables that can be set to adjust appearance
    Name Description
    --b-quick-find-header-badge-color Color for the quick find hit count indicator shown in the header
    --b-quick-find-header-inset Inset (position) for the quick find header "text field"
    --b-quick-find-hit-padding Padding for the quick find hit text highlight
    id: quickFind

    Source path

    Grid/feature/QuickFind.js

    Demo

    examples/quickfind

    Contents