Skip to content

feat: add search/filter functionality with result navigation (#114)#311

Open
yvng-jie wants to merge 1 commit into
leezng:devfrom
yvng-jie:dev
Open

feat: add search/filter functionality with result navigation (#114)#311
yvng-jie wants to merge 1 commit into
leezng:devfrom
yvng-jie:dev

Conversation

@yvng-jie

Copy link
Copy Markdown

This PR implements the search/filter feature requested in #114.

Features

  • Search filtering: Filter JSON tree by key and/or value via searchText prop
  • Three search modes: searchMode supports 'key', 'value', or 'all'
  • Case-sensitive toggle: searchCaseSensitive prop
  • Exact/fuzzy matching: searchStrict prop for exact match mode
  • Result navigation: nextMatch() / prevMatch() methods exposed via ref, with searchMatchChange event
  • Built-in info bar: Optional showSearchResultInfo prop shows match count + ◀▶ buttons
  • Text highlighting: Matched text is highlighted with .vjs-highlight class
  • Active row highlight: Current navigation target has .is-active-match visual style
  • Auto-expand: Matching paths are automatically expanded; collapsed state restored on clear
  • Zero-match fallback: Shows original data when no matches found (instead of empty tree)
  • Virtual scroll compatible: Works with the existing virtual mode
  • Dark theme support: Full dark mode adaptation

New Props

Prop Type Default
searchText String ''
searchCaseSensitive Boolean false
searchStrict Boolean false
searchMode 'key' | 'value' | 'all' 'all'
showSearchResultInfo Boolean false

New Events

Event Payload
searchMatchChange { currentIndex, totalCount }

New Expose Methods

Method Description
nextMatch() Navigate to next match
prevMatch() Navigate to previous match
getSearchResultInfo() Get { currentIndex, totalCount }

@leezng leezng left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. I have submitted a few ideas.


// ── Search info bar ──
const showSearchBar =
props.showSearchResultInfo && props.searchText?.trim() && searchMatchInfo.totalCount > 0;

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think showSearchResultInfo should be implemented by the application layer. The component should only expose the foundational APIs; higher-level business logic doesn't belong in the component abstraction.

Comment thread README.md
| bracketsClick | triggers when click brackets | (collapsed: boolean, node: NodeData) |
| iconClick | triggers when click icon | (collapsed: boolean, node: NodeData) |
| selectedChange | triggers when the selected value changed | (newVal, oldVal) |
| searchMatchChange | triggers when search results change or navigation occurs | ({ currentIndex, totalCount }) |

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it could be changed to search.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants