@@ -12,6 +12,7 @@ const getTagLabel = function (tagItem) {
1212
1313const showTagItem = function ( tagItem ) {
1414 tagItem . style . display = '' ;
15+ tagItem . classList . remove ( 'tag-item--hidden' ) ;
1516} ;
1617
1718const hideTagItem = function ( tagItem ) {
@@ -34,16 +35,30 @@ const toggleNoTagsMessage = function (container, hasVisible) {
3435 * Implements filtering decisions — determines which tags should be shown.
3536 */
3637
37- const filterTags = function ( tagItems , filterValue , getLabel ) {
38+ const filterTags = function (
39+ tagItems ,
40+ filterValue ,
41+ getLabel ,
42+ defaultVisibleCount ,
43+ ) {
3844 let hasVisible = false ;
39-
40- tagItems . forEach ( function ( tag ) {
41- const match = getLabel ( tag ) . includes ( filterValue ) ;
42- if ( match ) {
45+ const isSearchActive = filterValue . length > 0 ;
46+
47+ tagItems . forEach ( function ( tag , index ) {
48+ if ( isSearchActive ) {
49+ const match = getLabel ( tag ) . includes ( filterValue ) ;
50+ if ( match ) {
51+ showTagItem ( tag ) ;
52+ hasVisible = true ;
53+ } else {
54+ hideTagItem ( tag ) ;
55+ }
56+ } else if ( index < defaultVisibleCount ) {
4357 showTagItem ( tag ) ;
4458 hasVisible = true ;
4559 } else {
46- hideTagItem ( tag ) ;
60+ tag . style . display = '' ;
61+ tag . classList . add ( 'tag-item--hidden' ) ;
4762 }
4863 } ) ;
4964
@@ -70,13 +85,27 @@ const setupTagSearchForInput = function (input, options) {
7085
7186 removePreviousHandler ( input ) ;
7287
88+ const csContainer = document . querySelector ( '.cs_container' ) ;
89+ let defaultVisibleCount = 5 ;
90+ if ( csContainer ) {
91+ const parsed = parseInt ( csContainer . dataset . defaultVisibleTags , 10 ) ;
92+ if ( parsed > 0 ) {
93+ defaultVisibleCount = parsed ;
94+ }
95+ }
96+
7397 const handler = function ( ) {
7498 const filterValue = input . value . trim ( ) . toLowerCase ( ) ;
7599 const container = input . closest ( containerSelector ) ;
76100 if ( ! container ) return ;
77101
78102 const tagItems = container . querySelectorAll ( tagSelector ) ;
79- const hasVisible = filterTags ( tagItems , filterValue , getTagLabelFn ) ;
103+ const hasVisible = filterTags (
104+ tagItems ,
105+ filterValue ,
106+ getTagLabelFn ,
107+ defaultVisibleCount ,
108+ ) ;
80109 toggleNoTagsMessage ( container , hasVisible ) ;
81110 } ;
82111
0 commit comments