在wordpress 产品详情页 分类列表顶部添加一个搜索输入框 方便地在大量产品分类中查找所需的分类项。

1. 基础功能:

• 实时搜索过滤
• 保持分类层级关系
• 支持中英文搜索

2. 增强功能:

• 高亮显示匹配文本
• 自动展开包含匹配项的父级分类
• 添加清除搜索按钮
• 只在产品相关页面加载

3. 使用方法:

• 将代码添加到主题的functions.php文件中
• 在产品编辑页面的分类选择区域会出现搜索框
• 输入关键词即可实时过滤和高亮显示匹配的分类
• 点击清除按钮可以快速清空搜索

这样可以更方便地在大量产品分类中查找所需的分类项。

// 添加产品分类搜索功能
add_action('admin_footer', function() {
    // 只在产品编辑页面加载
    $screen = get_current_screen();
    if (!$screen || !in_array($screen->id, ['product', 'edit-product'])) {
        return;
    }
    
    ?>
    <style>
        .category-search {
            border-bottom: 1px solid #ccd0d4;
            background: #fff;
            padding: 10px;
        }
        
        .category-search input {
            width: 100%;
            padding: 5px;
            border: 1px solid #7e8993;
            border-radius: 4px;
            font-size: 13px;
        }
        
        .category-search input:focus {
            border-color: #007cba;
            box-shadow: 0 0 0 1px #007cba;
            outline: 2px solid transparent;
        }
        
        /* 高亮匹配的文本 */
        .highlight-text {
            background-color: #ffeb3b;
            padding: 0 2px;
        }
    </style>
    
    <script>
    jQuery(document).ready(function($) {
        // 添加搜索框
        $('#product_cat-tabs').after(`
            <div class="category-search">
                <input type="text" id="category-search-input" placeholder="搜索分类...">
            </div>
        `);
        
        // 搜索功能实现
        $('#category-search-input').on('input', function() {
            var searchText = $(this).val().toLowerCase();
            
            // 清除之前的高亮
            $('.highlight-text').contents().unwrap();
            
            if (searchText.length === 0) {
                // 如果搜索框为空,显示所有分类
                $('#product_catchecklist li').show();
                return;
            }
            
            // 遍历所有分类选项
            $('#product_catchecklist li').each(function() {
                var $item = $(this);
                var $label = $item.find('> label');
                var categoryText = $label.text();
                
                if (categoryText.toLowerCase().includes(searchText)) {
                    // 显示匹配项及其父级
                    $item.show().parents('li').show();
                    
                    // 高亮匹配文本
                    if (searchText.length > 0) {
                        var regex = new RegExp('(' + searchText + ')', 'gi');
                        var highlightedText = categoryText.replace(regex, '<span class="highlight-text">$1</span>');
                        $label.html($label.html().replace(categoryText, highlightedText));
                    }
                } else {
                    // 隐藏不匹配项
                    $item.hide();
                }
            });
            
            // 展开包含匹配项的父级分类
            $('#product_catchecklist li:visible').parents('ul.children').show();
        });
        
        // 添加清除按钮
        $('#category-search-input').after('<button type="button" id="clear-search" style="position:absolute;right:15px;top:15px;display:none;background:none;border:none;color:#666;cursor:pointer;">×</button>');
        
        // 显示/隐藏清除按钮
        $('#category-search-input').on('input', function() {
            $('#clear-search').toggle($(this).val().length > 0);
        });
        
        // 清除搜索
        $('#clear-search').click(function() {
            $('#category-search-input').val('').trigger('input');
            $(this).hide();
        });
    });
    </script>
    <?php
});