Skip to content

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

Merged
leezng merged 2 commits into
leezng:devfrom
yvng-jie:dev
Jul 30, 2026
Merged

leezng merged 2 commits into
leezng:devfrom
yvng-jie:dev

Conversation

@yvng-jie

@yvng-jie yvng-jie commented May 30, 2026 •

Copy link
Copy Markdown
Contributor

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
search String ''
searchCaseSensitive Boolean false
searchStrict Boolean false
searchMode 'key' | 'value' | 'all' 'all'

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.

Comment thread src/components/Tree/index.tsx Outdated
Comment thread README.md
@yvng-jie

Copy link
Copy Markdown
Contributor Author

@leezng Thanks for the review!

  1. showSearchResultInfo — I totally agree. The built-in info bar is indeed application-layer UI that doesn't belong in the component. I'll remove the showSearchResultInfo prop along with
    the associated rendering logic and styles. The example (Searchable.vue) already shows how to build this UI at the app layer using the exposed searchMatchChange event and
    nextMatch()/prevMatch() methods, so removing the built-in version keeps the component cleaner.

  2. searchText → search — Makes sense, I'll rename the prop to search and update the docs and example accordingly.

I'll push the changes shortly.

- Remove showSearchResultInfo prop (application-layer UI, not component's concern)
- Rename searchText prop to search (simpler, cleaner)
- Remove built-in search info bar JSX and CSS
- Update docs and example accordingly
@leezng
leezng merged commit 42d534c into leezng:dev Jul 30, 2026
1 check passed
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